CSS inset Property

Description

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
Inherited: no
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.inset

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.

Syntax

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

Values

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

Example

HTML

<div>

  <span class="exampleText">Example text</span>

</div>

CSS

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;
}

Result

Editor