CSS inset() Function

CSS inset() Function

The CSS inset() function defines a rectangular shape by specifying distances inward from the edges of a reference box.

It is commonly used with clip-path to control which portions of an element remain visible and with shape-outside to control how text wraps around floated elements. The optional round keyword creates rounded corners.

Syntax

inset(top)
inset(top right)
inset(top right bottom)
inset(top right bottom left)
inset(top right bottom left round border-radius)

The function accepts one to four length or percentage values, followed optionally by round and one or more corner radii.

For example:

.box {
  clip-path: inset(20px);
}

This creates a rectangular clipping region inset 20px from every edge of the reference box.

Additional examples:

clip-path: inset(10%);
clip-path: inset(10px 20px);
clip-path: inset(10px 20px 30px);
clip-path: inset(10px 20px 30px 40px);
clip-path: inset(10% 15% round 20px);
clip-path: inset(20px round 10px 30px);
clip-path: inset(10px round 20px / 10px);

The values are separated by spaces, not commas.

The function returns a CSS <basic-shape> value, not a length or positioning offset.

Parameters

The inset() function accepts the following components.

Omitted inset values follow the same expansion rules as the margin shorthand.

Lengths can use units such as px, rem, or em. Percentages are calculated relative to the dimensions of the reference box.

How It Works

The inset() function starts with a reference rectangle and moves its edges inward by the specified distances.

For example, consider an element measuring 300px wide and 200px high:

.box {
  width: 300px;
  height: 200px;
  clip-path: inset(20px 30px);
}

The top and bottom edges move inward by 20px, while the left and right edges move inward by 30px.

The resulting clipping rectangle measures:

Width: 300px - 30px - 30px = 240px
Height: 200px - 20px - 20px = 160px

Only content inside this rectangle remains visible.

The function does not change the element's actual width, height, or position in the document layout.

One Value

When one value is provided, it applies to all four sides.

For example:

.box {
  clip-path: inset(20px);
}

This is equivalent to:

.box {
  clip-path: inset(20px 20px 20px 20px);
}

Other examples:

clip-path: inset(10px);
clip-path: inset(2rem);
clip-path: inset(15%);

Use one value when the shape should be inset equally from every edge.

Two Values

When two values are provided, the first controls the top and bottom edges, and the second controls the right and left edges.

For example:

.box {
  clip-path: inset(10px 30px);
}

This is equivalent to:

.box {
  clip-path: inset(10px 30px 10px 30px);
}

The rectangle is inset 10px vertically and 30px horizontally.

Another example:

clip-path: inset(10% 20%);

The top and bottom edges are inset by 10% of the reference height, while the left and right edges are inset by 20% of the reference width.

Three Values

When three values are provided, they represent the top, right and left, and bottom distances.

For example:

.box {
  clip-path: inset(10px 20px 30px);
}

This is equivalent to:

.box {
  clip-path: inset(10px 20px 30px 20px);
}

The top edge moves inward 10px, the bottom edge moves inward 30px, and both horizontal edges move inward 20px.

Use three values when the top and bottom distances differ but the left and right distances are equal.

Four Values

When four values are provided, they represent the top, right, bottom, and left distances in clockwise order.

For example:

.box {
  clip-path: inset(10px 20px 30px 40px);
}

The values mean:

Four values provide independent control over every edge of the rectangle.

Using Percentages

Percentages allow the inset distances to scale with the reference box.

For example:

.box {
  clip-path: inset(10% 20%);
}

Top and bottom percentages are based on the reference height. Left and right percentages are based on the reference width.

For a reference box measuring 300px by 200px, the resulting distances are:

Lengths and percentages can be combined:

clip-path: inset(10px 15% 20px 5%);

If opposite inset distances exceed the available dimension, the values are proportionally reduced so the resulting rectangle does not have a negative size.

For example, top and bottom values of 90% and 60% are reduced to 60% and 40%, respectively.

Rounded Corners

The optional round keyword adds rounded corners to the inset rectangle.

For example:

.box {
  clip-path: inset(15px round 20px);
}

This creates a rectangle inset 15px on all sides, with 20px corner radii.

Different corner radii can be specified:

clip-path: inset(15px round 10px 20px 30px 40px);

The four radii apply to the top-left, top-right, bottom-right, and bottom-left corners.

Elliptical corner radii are also supported:

clip-path: inset(15px round 30px / 15px);

The syntax after round follows the same rules as the border-radius property.

Unlike border-radius, the rounding is applied to the defined clipping shape rather than directly to the element's border box.

Using clip-path

The clip-path property uses inset() to control the visible portion of an element.

For example:

.photo {
  clip-path: inset(15%);
}

This hides the outer 15% of the element's reference box on each side.

To create a rounded clipping shape:

.photo {
  clip-path: inset(10% round 20px);
}

The clipped portions are not painted and do not receive pointer events.

However, clipping does not change the space the element occupies in the layout.

The shape can also be animated or transitioned to reveal more or less of the element.

Using shape-outside

The shape-outside property can use inset() to control how inline content wraps around a floated element.

For example:

.floating-box {
  float: left;
  width: 180px;
  height: 140px;
  shape-outside: inset(20px round 20px);
  background-color: #0066cc;
}

The text wraps around the defined inset shape rather than simply following the element's rectangular margin box.

The element must be floated for shape-outside to affect surrounding text.

The shape-margin property can add space around the wrapping shape:

.floating-box {
  float: left;
  width: 180px;
  height: 140px;
  shape-outside: inset(20px round 20px);
  shape-margin: 10px;
}

Unlike clip-path, shape-outside does not hide parts of the element. It affects text wrapping only.

Reference Box

The reference box determines the dimensions used by inset().

With clip-path, the default reference box for an HTML element is its border box.

For example:

.box {
  width: 300px;
  height: 200px;
  clip-path: inset(10%);
}

The clipping distances are calculated from the reference box, which can include the element's border and padding.

A geometry box can be specified explicitly:

.box {
  clip-path: content-box inset(10%);
}

This uses the content box as the reference rectangle.

Other geometry boxes include padding-box and border-box.

With shape-outside, the reference box is determined by the shape and geometry-box rules of that property.

Using Custom Properties

CSS custom properties can store inset distances and corner radii.

For example:

.box {
  --clip-space: 15px;
  --clip-radius: 20px;
  clip-path: inset(var(--clip-space) round var(--clip-radius));
}

Changing the custom properties updates the clipping shape.

Different values can be assigned to individual sides:

.box {
  --top: 10px;
  --right: 20px;
  --bottom: 30px;
  --left: 40px;
  clip-path: inset(var(--top) var(--right) var(--bottom) var(--left));
}

Custom properties make it easier to reuse and adjust clipping shapes across multiple elements.

Animation

The inset() function can be used with CSS transitions and animations to reveal or hide portions of an element.

For example:

.reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.5s ease;
}
.reveal:hover {
  clip-path: inset(0 0 0 0);
}

Initially, the element is clipped completely from the right. On hover, the clipping region expands to reveal the element.

Another example uses keyframes:

@keyframes reveal-content {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}
.reveal {
  animation: reveal-content 1s ease forwards;
}

For accessible motion effects, consider the user's prefers-reduced-motion preference.

Example

This example compares four rectangular clipping shapes using different inset distances.

HTML:

<div class="inset-demo">
  <div class="inset-demo-item">
    <div class="inset-demo-shape inset-demo-one">10px</div>
    <span>inset(10px)</span>
  </div>
  <div class="inset-demo-item">
    <div class="inset-demo-shape inset-demo-two">10% 20%</div>
    <span>inset(10% 20%)</span>
  </div>
  <div class="inset-demo-item">
    <div class="inset-demo-shape inset-demo-three">10px 20px 30px</div>
    <span>inset(10px 20px 30px)</span>
  </div>
  <div class="inset-demo-item">
    <div class="inset-demo-shape inset-demo-four">10px 20px 30px 40px</div>
    <span>inset(10px 20px 30px 40px)</span>
  </div>
</div>

CSS:

.inset-demo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  max-width: 480px;
  margin: 0 auto;
}
.inset-demo-item {
  min-width: 0;
  padding: 8px;
  background-color: #eaf3ff;
  text-align: center;
}
.inset-demo-shape {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background-color: #0066cc;
  color: #fff;
  font-size: 12px;
}
.inset-demo-item > span {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.inset-demo-one { clip-path: inset(10px); }
.inset-demo-two { clip-path: inset(10% 20%); }
.inset-demo-three { clip-path: inset(10px 20px 30px); }
.inset-demo-four { clip-path: inset(10px 20px 30px 40px); }

The pale blue area represents the original element's rectangular space. The dark blue area shows the portion that remains visible after clipping.

Each example uses a different combination of inset distances.

Rounded Corners Example

This example compares a rectangular clipping shape with two rounded versions.

HTML:

<div class="inset-round-demo">
  <div class="inset-round-item">
    <div class="inset-round-shape inset-round-one"></div>
    <span>No rounding</span>
  </div>
  <div class="inset-round-item">
    <div class="inset-round-shape inset-round-two"></div>
    <span>round 20px</span>
  </div>
  <div class="inset-round-item">
    <div class="inset-round-shape inset-round-three"></div>
    <span>round 40px</span>
  </div>
</div>

CSS:

.inset-round-demo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}
.inset-round-item {
  min-width: 0;
  padding: 5px;
  background-color: #eaf3ff;
  text-align: center;
}
.inset-round-shape {
  height: 110px;
  background-color: #0066cc;
}
.inset-round-item > span {
  display: block;
  margin-top: 8px;
  font-size: 11px;
}
.inset-round-one { clip-path: inset(10px); }
.inset-round-two { clip-path: inset(10px round 20px); }
.inset-round-three { clip-path: inset(10px round 40px); }

All three shapes use the same 10px inset distance. The round keyword changes the corner shape without changing the specified edge offsets.

inset() vs. inset Property

The inset() function and the inset property have similar names but different purposes.

For example, the function creates a clipping shape:

.box {
  clip-path: inset(20px);
}

The property sets positioning offsets:

.box {
  position: absolute;
  inset: 20px;
}

The function does not replace the property, and the property cannot be used as a basic shape function.

Common Uses

The inset() function is useful for rectangular clipping and shape-based layouts.

For example:

.image-frame {
  clip-path: inset(5% 10% round 20px);
}

This creates a responsive rectangular clipping shape with rounded corners.

Limitations

The inset() function has several important rules and limitations.

• It requires at least one inset distance.
• It accepts no more than four inset distances before the optional round keyword.
• Inset distances are separated by spaces, not commas.
• The round keyword must be followed by valid corner radii.
• It defines a shape but does not change the element's actual layout dimensions.
• Percentages depend on the reference box dimensions.
• Opposite inset distances that exceed the available dimension are proportionally adjusted.
• The shape-outside property affects text wrapping only when used on an appropriate floated element.
• Clipped content may still occupy layout space even though it is not visible.

For example, this is valid:

clip-path: inset(10px 20px round 15px);

The following is invalid because no inset distance is supplied:

clip-path: inset();

The following is invalid because commas are not permitted between inset distances:

clip-path: inset(10px, 20px);

Use space-separated lengths or percentages and include valid corner radii when using round.

Browser Support

The CSS inset() function is Baseline Widely available. It has been supported across major browser engines since January 2020.

Modern versions of Chrome, Edge, Firefox, Safari, and other major browsers support inset() as a basic shape function.

For example:

.box {
  clip-path: inset(10% round 20px);
}

Older browsers may not support all combinations of clipping shapes, rounding, or the properties that accept them.

For current compatibility information, visit Can I Use? and search for CSS inset().

Specifications

The inset() function is defined in the CSS Shapes Module Level 1 .

The specification defines rectangular inset shapes, length and percentage arguments, and optional rounded corners.

Related CSS functions include circle(), ellipse(), polygon(), rect(), and xywh().