CSS inset Property


The inset CSS property is a shorthand property used to set the values for the "top," "right," "bottom," and "left" properties simultaneously for positioning an element within its containing element. It is commonly used for creating inset shadows and borders. For example, you can use "inset" to define the size and color of an inset box-shadow or the width and style of an inset border, simplifying the styling of elements by consolidating these values into a single declaration. This property enhances code readability and reduces redundancy in CSS, making it more efficient for designing modern web interfaces.

Initial value
See individual properties
Applies to
positioned elements
Computed value
See individual properties
See individual properties
JavaScript syntax

Interactive Demo

I am absolutely positioned.
The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.


inset: <'top'>{1,4}


  • <'top'>{1,4}Sets the top, right, bottom, and left properties. Values are assigned to its sub-properties as for margin.


<span class="exampleText">Example text</span>
div {
  background-color: yellow;
  width: 150px;
  height: 120px;
  position: relative;

.exampleText {
  writing-mode: sideways-rl;
  position: absolute;
  inset: 20px 40px 30px 10px;
  background-color: #c8c800;

Browser Support

The following table will show you the current browser support for the CSS inset property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 2nd January 2024