inset()

The inset() function is a shape function used to specify a <basic-shape>.

The <basic-shape> CSS value represents a basic shape that is defined using a shape function. A basic shape can then be passed as a value to a property such as the shape-outside property, or the clip-path property, which are used to apply the shape to an element in order to change the flow of content around it, or to clip the element to the defined shape, respectively.

inset() = inset( [offset]{1,4} [round <border-radius>]? )
/* where.. */
offset = <length> | <percentage>
                

The inset() functions defines an inset rectangle. It takes one to four offset values, which specify the offsets from the edges of the references box inward. These specify where the inset rectangle goes inside the element.

The syntax of the offsets is the same as the syntax of the margin shorthand property. This means that you can set all four insets with one, two or four values. If one offset value is specified (e.g 15px), it will be used as a top, right, bottom, and left offset. If two offset values are specified (e.g 20px 10px), they specify the top and bottom offsets and the right and left offsets, respectively. If three values are specified (e.g 10px 15px 20px), the first specifies the top offset, the second specifies the right and left offsets, and the third specifies the bottom offset. If four values are specified, the first is used as the top offset, the second as the right offset, the third as the bottom offset, and the fourth as the left offset.

And just like with margins, the offset values can be set in absolute lengths or percentages.

In addition to the offset value(s), the inset() function takes an optional border-radius value that specifies the amount by which the corners of the rectangles are to be rounded. The border-radius argument uses the same syntax as the syntax of the border-radius property—one to eight values specifying the rounding value for the four corners in either or both horizontal and vertical dimensions. Refer to the border-radius property entry for more information about it if you’re not already familiar with it. The border radius specified must be preceded by the round keyword.

The following are all valid inset() rectangle shape declarations:

inset(10% 20% round 5px);
/* a rectangle with 5px rounded corners, whose edges
are set inwards by 10% from the top and bottom edges
of the reference box, and 20% inwards from the left
and right edges of the box */

inset(15px 20px 30px);
/* creates a non-rounded inset rectangle, set inwards
by 15px from the top, 20px from the right and left
edges of the reference box, and 30px inwards from the
bottom edge of the reference box */

inset(25% round 10px 30px);
/* creates a rectangle set inwards by 25% in all four
directions relative to the edges of the reference box,
and has top-left and bottom-right corners rounded by
10px, and the top-right and bottom-left corners
rounded by 30px */

inset(10px 20px 30px 40px round 10px);