CSS Inset Property: Replace Top Right Bottom Left

The CSS inset property is a modern shorthand that simplifies how developers position elements on a web page by replacing the individual top, right, bottom, and left properties. Instead of declaring up to four separate offset declarations in a stylesheet, inset allows you to set all directional offsets within a single line of code. This article explains how the inset property works, details its multi-value syntax, compares it to traditional positioning methods, and explores practical use cases for everyday web development.

What is the CSS inset Property?

The inset property is part of the CSS Positioned Layout Module. It acts as an exact shorthand for the four physical offset properties: top, right, bottom, and left.

Just like the traditional offset properties, inset has no effect on elements with position: static. It only applies to elements that have their position set to relative, absolute, fixed, or sticky.

Replacing the Traditional Method

Historically, stretching an absolute or fixed element across its entire containing block required four separate declarations:

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

With the inset shorthand, the exact same behavior is achieved with a single declaration:

.modal-backdrop {
  position: fixed;
  inset: 0;
}

This reduces code verbosity, makes maintenance easier, and improves overall stylesheet readability.

Syntax and Value Mapping

The syntax of inset follows the standard four-directional multi-value pattern used by properties like margin and padding (often remembered by the acronym TRBL: Top, Right, Bottom, Left).

Depending on the number of values supplied, inset maps to the directional offsets as follows:

• One value: Applies to all four sides.

  inset: 10px;
  /* top: 10px; right: 10px; bottom: 10px; left: 10px; */

• Two values: The first value sets top and bottom; the second sets left and right.

  inset: 10px 20px;
  /* top: 10px; bottom: 10px; */
  /* left: 20px; right: 20px; */

• Three values: The first value sets top; the second sets left and right; the third sets bottom.

  inset: 10px 20px 30px;
  /* top: 10px; */
  /* left: 20px; right: 20px; */
  /* bottom: 30px; */

• Four values: Sets top, right, bottom, and left in clockwise order.

  inset: 5px 10px 15px 20px;
  /* top: 5px; */
  /* right: 10px; */
  /* bottom: 15px; */
  /* left: 20px; */

Handling Unset Values with auto

If you only need to position an element using specific sides, you can pass auto to the sides you want to leave unset, preserving the shorthand syntax:

/* Position an element pinned to the bottom-right corner */
.badge {
  position: absolute;
  inset: auto 10px 10px auto;
  /* top: auto; right: 10px; bottom: 10px; left: auto; */
}

While using individual properties (such as bottom: 10px; right: 10px;) is often clearer when only targeting one or two sides, inset remains useful when resetting previous declarations or explicitly clearing inherited offsets.

Practical Use Cases

1. Full-Coverage Overlays

Creating full-bleed overlays, backdrops, and modal screens is the most common use case:

.overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

2. Absolute Centering with margin: auto

Combining inset: 0 with margin: auto is an effective technique for centering elements with defined dimensions inside a positioned container:

.card-centered {
  position: absolute;
  inset: 0;
  width: 300px;
  height: 200px;
  margin: auto;
}

3. Uniform Padding for Absolute Elements

If an absolutely positioned element needs an even offset from all borders of its parent container, inset handles it seamlessly:

.inner-frame {
  position: absolute;
  inset: 1.5rem;
  border: 2px dashed #ccc;
}

Browser Support

The inset property is widely supported across all modern web browsers, including Chrome, Edge, Firefox, and Safari. It is fully standard and ready for production use without requiring vendor prefixes.