CSS inset() Function

.example {
  clip-path: inset(100px);
}

Meaning

The inset() css function defines an inset rectangle.

Version: CSS3

inset( shape-arg[1,4] [border-radius])

The numbers in the table specify the first browser version that fully supports the property.

The following table describes the arguments of this function.

Argument	Description
shape-arg[1,4]	Specifies the four arguments top, right, bottom and left offsets from the reference box inward that define the positions of the edges of the inset rectangle. These arguments follow the syntax of the margin shorthand, that let you set all four insets with one, two or four values.
border-radius	Optional. Define rounded corners for the inset rectangle using the border-radius shorthand syntax.

Four sides are defined.

.example {
  clip-path: inset(1rem 2rem 3rem 4rem);
}

Sides and border radius are defined.

.example {
  clip-path: inset(20% 30% round 20px);
}

Sides and four different border radius are defined.

.example {
  clip-path: inset(4rem 20% round 1rem 2rem 3rem 4rem);
}