CSS inset

The inset property is a shorthand for top, right, bottom and left. It positions an element after the element has a positioning mode such as absolute, fixed, relative or sticky.

Syntax

inset: auto;
inset: 1rem;
inset: 1rem 2rem;
inset: 1rem 2rem 3rem 4rem;

The value order follows the same pattern as margin: all sides, vertical/horizontal, top/horizontal/bottom or top/right/bottom/left.

Example

.badge {
  position: absolute;
  inset: 1rem 1rem auto auto;
}

Result:

New

Important note

inset is not the same as box-shadow: inset. As a property, inset controls offsets; inside box-shadow, inset is only a keyword for an inner shadow.