inset() CSS Function

Description

The CSS inset() function is a basic shape function that defines a rectangle at the specified inset distances from each side of the reference box. It can be used for a variety of purposes, such as positioning elements inside or outside of a container, or clipping the contents of an element to a specific shape.

The inset() function takes up to four arguments, which represent the top, right, bottom, and left offsets from the reference box inward. These arguments can be specified in any order, and each argument can be a length value, a percentage value, or auto.

If only one argument is provided, it is applied to all four sides of the rectangle. If two arguments are provided, the first argument is applied to the top and bottom, and the second argument is applied to the left and right. If three arguments are provided, the first argument is applied to the top, the second argument is applied to the left and right, and the third argument is applied to the bottom.

Here are some examples of how to use the inset() function:

/* Set the top, right, bottom, and left insets to 10px */
.element {
  inset: 10px;
}

/* Set the top and bottom insets to 20px, and the left and right insets to 10px */
.element {
  inset: 20px 10px;
}

/* Set the top inset to 30px, and the left, right, and bottom insets to 20px */
.element {
  inset: 30px 20px;
}

/* Set the top, right, bottom, and left insets to 10%, 20%, 30%, and 40% respectively */
.element {
  inset: 10% 20% 30% 40%;
}

The inset() function can also be used with the filter property to apply a variety of effects to an image. For example, the following code will create a rounded inset border around an image:

.image {
  filter: inset(10px) round;
}

The inset() function is a powerful tool that can be used to create a variety of interesting and visually appealing effects. It is supported by all major browsers, so you can be confident that your designs will look great across a wide range of devices.

Syntax

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

Values

• offsetWhen all of the first 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. These arguments follow the syntax of the margin shorthand, that let you set all four insets with one, two or four values.
• border-radiusdefine rounded corners for the inset rectangle using the border-radius shorthand syntax

Example

<div class="inset"></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

.inset {  

  float: left;

  width: 200px;

  height: 150px;

  shape-outside: inset(50px);

}

Browser Support

The following table will show you the current browser support for the CSS inset() function.

Desktop
79	37	54	24	10.1

Tablets / Mobile
37	54	24	10.3	3	37

Last updated by CSSPortal on: 7th October 2023