CSS inset() Function
Example
Clip two <div> elements to a rectangle at the specified inset distances from each side of the reference box:
#blueDIV {
float: left;
width: 150px;
height:
100px;
background-color: lightblue;
clip-path:
inset(15px);
}
#pinkDIV {
float: left;
width: 150px;
height: 100px;
background-color: pink;
clip-path: inset(5%
10% 15% 10% round 20px);
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS inset() function defines a rectangle
at the specified inset distances from each side of the reference box.
The inset() function is used with the
clip-path property and the
shape-outside property.
| Version: | CSS Shape Module Level 1 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| inset() | 37 | 79 | 54 | 10.1 | 24 |
CSS Syntax
inset(length-percentage round border-radius)
| Value | Description |
|---|---|
| length-percentage | Required. From one to four arguments (in length or percent), representing the top, right, bottom and left offsets from the reference box |
| round border-radius | Optional. Specifies if the inset rectangle should have rounded corners |
More Examples
Example
Animation of clip-path and inset():
#myDIV {
width: 100px;
height: 100px;
background-color: coral;
color: green;
animation: mymove
5s infinite;
clip-path: inset(10% round 20px);
}
@keyframes mymove {
50% {clip-path: inset(50%
round 50px);}
}
Try it Yourself »
Example
Use of inset(), clip-path and shape-outside:
#blueDIV {
float: left;
width: 150px;
height:
100px;
background-color: lightblue;
clip-path: inset(45px
50px 15px 0 round 50px);
shape-outside: inset(40px 40px 10px 0 round
50px);
}
Try it Yourself »
Related Pages
CSS reference: clip-path property.
CSS reference: shape-outside property.
CSS reference: circle() function.
CSS reference: ellipse() function.
