CSS inset() function

Definition and usage

CSS ' inset() Function defines a rectangle that maintains a specified inner distance from each side of the reference frame.

inset() Functions usually work with clip-path Properties and shape-outside Use the properties together.

Instance

Example 1

Trim two <div> elements to rectangles that maintain a specified inner distance from each side of the reference frame:

#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

Example 2

Using clip-path and inset() To achieve the animation effect:

#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 3

combined use 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

CSS syntax

inset(length-percentage round border-radius)
Value Description
length-percentage Required. 1 to 4 parameters (length or percentage), representing the offset from the top, right, bottom, and left of the reference frame.
round border-radius Optional. Specifies whether the inner rectangle should have rounded corners.

Technical details

Version: CSS Shape Module Level 1

Browser support

The numbers in the table indicate the browser version that first fully supports this function.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

Related pages

Reference:CSS clip-path property

Reference:CSS shape-outside property

Reference:CSS circle() function

Reference:CSS ellipse() function

Reference:CSS polygon() function