Inset Property
Last updated: 2026-09-13
inset Inset Property
The inset property is the shorthand for the four offset properties top, right, bottom, and left, setting a positioned element's offsets on all sides at once. Its default value, auto, means no offset. It only applies to elements with a non-static position, and its syntax mirrors margin, supporting 1 to 4 values.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
inset: auto | <length> | <percentage>;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | Keyword | No offset. |
<length> | <percentage> | Type | Shorthand for offsets on all four sides. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| inset | ✓ v79 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： inset:0 makes an absolutely positioned element cover its parent completely, commonly used for overlay and full-screen cover layers.
❓ FAQ
QWhat's the difference between inset and top/right/bottom/left?
Ainset is the shorthand for top, right, bottom, and left, setting all four directions in a single declaration for cleaner code; the four individual properties give precise control over one direction at a time and can be mixed with inset, where individual values win. Both ultimately set the same offsets on a positioned element with the same value types, so they are interchangeable.
QHow many values does inset accept?
AOne to four, following the same rules as margin: one value sets all four sides, such as inset:10px; two set top and bottom plus left and right, such as inset:10px 20px; three set top, left and right, and bottom; four set top, right, bottom, left clockwise. Values can mix auto, lengths, and percentages freely, so inset:0 10px 20px 30px sets each side independently in a single declaration.
QWhat does inset:0 do?
Ainset:0 sets top, right, bottom, and left all to 0. For an absolute element inside a relative parent, it stretches to fill the parent completely, which is typically used for overlay layers, full-screen covers, and loading masks with a semi-transparent background. If width and height are also set, it is equivalent to placing the element at the parent's top-left corner.
QWhat is the browser support for inset?
Ainset is a modern logical property supported in Chrome 87+, Edge 87+, Firefox 66+, and Safari 14.1+, so all mainstream browsers can use it. For very old browsers, fall back to the four individual top, right, bottom, and left properties. The logical variants inset-block and inset-inline shipped a bit later, so keep that distinction in mind when using them, and always test the physical versus logical behavior in your target browsers.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
