CSS inset() Function

The inset() function is a CSS basic shape value that's part of the CSS Shapes module.

Basic shapes such as inset() can be used as a value for properties such as shape-outside to control the flow of content around the element, and clip-path to clip the element's contents to the basic shape.

This means you can do things like, have text flowing around the element in the shape that you specify, have an image clipped to that shape, etc.

Basic Example

Here's an example of how the inset() function works with the shape-outside property:

<style>
div {  
  float: left;
  width: 200px;
  height: 150px;
  shape-outside: inset(50px);
}
</style>

<div></div>
<p>Ornare quam viverra orci sagittis eu volutpat odio. Viverra adipiscing at in tellus integer feugiat scelerisque. Adipiscing bibendum est ultricies integer quis auctor. Massa tincidunt dui ut ornare lectus sit amet. Pellentesque elit eget gravida cum sociis natoque penatibus et. Sed vulputate odio ut enim blandit volutpat maecenas volutpat. Purus viverra accumsan in nisl nisi. Dignissim enim sit amet venenatis urna cursus eget. Ornare arcu odio ut sem nulla pharetra diam sit. Vitae justo eget magna fermentum iaculis.</p>

Here we have a div floated to the left. And because I've applied the inset() function to it, the subsequent text flows around the shape as specified.

It's easier to visualize this concept by looking at the following example.

<style>
div {  
  float: left;
  width: 200px;
  height: 150px;
  shape-outside: inset(50px);
  background: yellow;
}
</style>

<div></div>
<p>Ornare quam viverra orci sagittis eu volutpat odio. Viverra adipiscing at in tellus integer feugiat scelerisque. Adipiscing bibendum est ultricies integer quis auctor. Massa tincidunt dui ut ornare lectus sit amet. Pellentesque elit eget gravida cum sociis natoque penatibus et. Sed vulputate odio ut enim blandit volutpat maecenas volutpat. Purus viverra accumsan in nisl nisi. Dignissim enim sit amet venenatis urna cursus eget. Ornare arcu odio ut sem nulla pharetra diam sit. Vitae justo eget magna fermentum iaculis.</p>

As you can see, the inset is drawn within the floated box. The floated box actually protrudes out from the inset area, into the surrounding text. In other words, the text is allowed to flow right up to where we've specified the inset. The extent to which it does this depends on any arguments that you pass to the inset() function.

How to Specify the Inset Dimensions

You must specify the dimensions of the inset by providing between one to four arguments to the inset() function.

When all four arguments are supplied, they represent the top, right, bottom and left offsets from the reference box inward that define the positions of the edges of the inset rectangle.

However, you can use less arguments as a shorthand. These follow the syntax of the margin shorthand, which allows you to set all four insets with one, two or four values.

You can also use percentage values (such as 10%, 10% 20%, etc) to specify the inset area.

Here's an example of using a percentage value.

<style>
div {  
  float: left;
  width: 200px;
  height: 150px;
  shape-outside: inset(20% 40% 30% 0%);
  background: yellow;
}
</style>

<div></div>
<p>Ornare quam viverra orci sagittis eu volutpat odio. Viverra adipiscing at in tellus integer feugiat scelerisque. Adipiscing bibendum est ultricies integer quis auctor. Massa tincidunt dui ut ornare lectus sit amet. Pellentesque elit eget gravida cum sociis natoque penatibus et. Sed vulputate odio ut enim blandit volutpat maecenas volutpat. Purus viverra accumsan in nisl nisi. Dignissim enim sit amet venenatis urna cursus eget. Ornare arcu odio ut sem nulla pharetra diam sit. Vitae justo eget magna fermentum iaculis.</p>

How to add a Rounded Corners to the Inset

You can add a rounded corners to the inset using the border-radius shorthand.

To do this, add the round keyword between the inset dimensions and the border radius definition. Like this:

Here's a working example:

<style>
div {  
  float: left;
  width: 200px;
  height: 150px;
  shape-outside: inset(20% round 35px 10px);
  background: yellow;
}
</style>

<div></div>
<p>Ornare quam viverra orci sagittis eu volutpat odio. Viverra adipiscing at in tellus integer feugiat scelerisque. Adipiscing bibendum est ultricies integer quis auctor. Massa tincidunt dui ut ornare lectus sit amet. Pellentesque elit eget gravida cum sociis natoque penatibus et. Sed vulputate odio ut enim blandit volutpat maecenas volutpat. Purus viverra accumsan in nisl nisi. Dignissim enim sit amet venenatis urna cursus eget. Ornare arcu odio ut sem nulla pharetra diam sit. Vitae justo eget magna fermentum iaculis.</p>

Using `inset()` with `clip-path()`

Here's an example of using the CSS inset() function with the clip-path property.

<style>
img {
 -webkit-clip-path: inset(50px round 15px);
 clip-path: inset(50px round 15px);
}
</style>

<img src="/pix/samples/15m.jpg" alt="Longtail boat in Thailand">

Here's another example, this time using a different border radius value for each corner:

<style>
img {
 -webkit-clip-path: inset(10px round 80px 20px 30px 10px);
 clip-path: inset(10px round 80px 20px 30px 10px);
}
</style>

<img src="/pix/samples/15m.jpg" alt="Longtail boat in Thailand">

If your browser supports the clip-path property (and the inset() function), the above image should appear in the shape of the inset area. Otherwise it will appear in the normal dimensions of the image.

At the time of writing, browser support for the clip-path property is limited. None of the major browsers support it, however, webkit browsers have partial support using the -webkit- prefix.

Official Syntax

The official syntax of the inset() function is as follows:

And the syntax of <shape-arg> is:

The syntax for <border-radius> is:

Possible Values

The inset's dimensions and its border radius can be set using the following values:

length: Specifies a length value to use (e.g. px, em, vw, etc) for the radius.
percentage: Specifies a percentage value to use. The percentage value uses the width and height of the reference box.

CSS Specifications

The inset() function is defined in CSS Shapes Module Level 1 (W3C Candidate Recommendation, 20 March 2014)
It's also being further defined in CSS Shapes Module Level 2 (Editorâ€™s Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.