inset() | CSS-Tricks

The CSS inset() function allows you to create rectangles to use with the shape-outside, clip-path, and offset-path properties.

.element {
  clip-path: inset(10px 2em 30% 3vw);
}

“Drawing” shapes

As with the other functions that produce a basic shape — including ellipse(), circle(), xywh(), polygon(), path(), and shape() — you won’t be drawing shapes directly on the screen in the way you’d normally think. You will either be creating a shape for text and elements to flow around (shape-outside), creating a cookie cutter to cut the shape out of another element (clip-path), or creating a shape that another element could move along (offset-path).

Clarification note: Neither path() nor shape() can be used with the shape-outside property like the other basic shape functions.

Reference box

Before we get too deep, let’s discuss the reference box. This is the box upon which the basic shapes used in shape-outside and clip-path is formulated.

By default, the box defined by the outer edges of the margins is the reference box, so a shape must fit inside the reference box to have an effect. If the shape is larger than the reference box, then the outer edges of the element will remain intact, i.e. its unmodified rectangular form.

For the shape-outside property, this means the text and elements will flow around the element as if no shape-outside property was used. For clip-path, it similarly means that nothing will be clipped because the entire element fits within the cookie cutter. If you need to change the reference box, you’ll need to add the appropriate keyword (margin-box, padding-box, border-box, etc.) to clip-path or shape-outside.

The offset-path property is not limited by the reference box in the same way shape-outside and clip-path are limited by it. An offset-path whose shape is well outside the reference box will still allow an element to move along it, however, the reference box used can affect where and how the shape is “drawn.”

Why we need this

You might be wondering why we need something like inset() for “drawing” shapes. Elements are already rectangular boxes by default, after all. But there are a few reasons to do this:

Greater control: While you could also just resize the element, using a rectangular function allows you to fine tune the rectangle that’s shown and you can specifically make it smaller than the size of the element. For instance, have text flow over a portion of an element or precisely place the rectangle within the confines of the element.
Animation performance: If you need to animate that square in some way, animating the clip-path won’t trigger a layout shift because it’s all happening within the element.
Rounded corners: The majestic squircle can be yours using this function. While you can do rounded corners on the element itself you can’t have text flow into the space between the corner and the rounded part, unless you use a rectangular function with shape-outside.

Basic usage

Let’s start with clip-path so that we can more easily see the size and edges of the rectangles we create.

<div class="b4urectyourself"></div>

.b4urectyourself {
  width: 300px;
  height: 300px;
  background-color: orchid;
  clip-path: inset(10px 2em 30% 3vw);
}

Next let’s use shape-outside to flow some text along some squircle sides:

<p>
  **some text**
  <span class="b4urectyourself"></span>
  **more text**
</p>

.b4urectyourself {
  width: 300px;
  height: 300px;
  background-color: orchid;
  float:left;
  shape-outside: inset(20px 2em 20% 3vw round 5em);
}

Finally let’s send our squircle around a squircle using offset-path:

<div class="b4urectyourself"></div>

.b4urectyourself {
  width: 300px;
  height: 300px;
  background-color: orchid;
  /* Cuts the rectangle out of the element */
  clip-path: inset(20px 2em 20px 3em round 3em);
  /* Defines the animated path */
  offset-path: inset(20px 2em 20px 3em round 3em);
  offset-distance: 0;
  /* Applies the animation */
  animation: squircle-offset 5s linear infinite;
}

/* Defines the animation */
@keyframes squircle-offset {
  from {
    offset-distance: 0;
  }
  to {
    offset-distance: 100%;
  }
}

body {
  margin: 150px;
}

Syntax

The inset() function can take as few as one or as many as nine parameters in three sections: distances, separator, and corner radii.

<inset()> = inset(
  <length-percentage>{1,4}
  [ round <'border-radius'> ]?
)

Inner distances

The first section of values is a set of up to four inner distances (or lengths) from each side of the element.

If four values are used, the first value is the inner distance between the top of the element and the “inset” rectangle within it. The second value is the distance between the right side of the element and the right side of the inner rectangle. The third is for the bottom side, and the fourth for the left side.

If that pattern feels familiar, you’re probably used to setting margins or padding. These values work in the same order and the same way as those in margin and padding:

If one value is used, it applies to all sides.
With two values, the first applies to top and bottom and the second to the left and right.
With three values, the first value applies to the top, the second to the left and right and the third to the bottom.

Note: These are offsets from the outer edges so the higher the numbers the smaller the resulting rectangle because you’re setting the distance between the outer edge of the rectangle and where your inner (inset) rectangle begins.

The `round` keyword

The round keyword separates the two sets of values and is required if rounded corners are used.

Corner radii

Similar to border-radius (and the above) you can set one, two, three or four values of your corner radii.

With just one value all corners will have the same rounding.
With two values, the first will affect the upper right and lower left while the second will affect the lower right and upper left.
In three values the first value applies to the upper right, the second value to the lower right and upper left and the third value to the lower left.
With four values each value will affect a particular corner starting at the upper-right and going clockwise through to the upper-left.

Note: The magnitude of values works the same as border-radius so a larger number will create a more curved corner.

`inset()` vs. `rect()`

First while inset and rect work very similarly and have largely identical syntax, rect() has been deprecated and should not be used. So anytime you come across rect() replace it with inset().

Note: rect() had a short life as the way to create a rectangle with the equally short-lived clip property (that has now been supplanted by the clip-path property), but in that incarnation it had similar but slightly different syntax. If you come across it in some old code, be sure to update the syntax and replace both it and the clip property.

`inset()` vs. `xywh()`

inset() creates a rectangle by setting a distance between the outer edge of the element and the rectangle you want to create. This is perfect for rectangles that are static and/or that will always directly correlate with the size of the element.

If, however, you want a box that can easily move around and keep its shape, it will get super annoying to recalculate the box location every time. That’s where xywh() shines. With it you set the upper left corner (x and y) and then set the width and height (w and h). Need to move it? Just change the coordinates of the upper corner, no need to recalculate every side again.

Note: Chromium-based browsers only support xywh() when used with the offset-path property.

Browser support

Specification

The CSS inset() function is defined in the CSS Shapes Module Level 1 specification, which became a Candidate Recommendation on June 12, 2025. That means it integrates changes from a previous Candidate Recommendation (Draft or Snapshot) to allow for review and for ease of reference to the integrated specification, but those changes have not undergone a formal review.