Outline Offset Property
Last updated: 2026-09-13
outline-offset Outline Offset Property
outline-offset controls the distance between the outline and the element's border edge. A positive value pushes the outline outward, away from the element; a negative value pulls it inward, closer to or even inside the element. It is usually paired with outline to refine the visual effect.
| Category | |
|---|---|
| Initial Value | 0 |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
outline-offset: <length>;⚙️ Values
| Value | Type | Description |
|---|---|---|
<length> | Type | Outline offset distance |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| outline-offset | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： Positive offsets are often used on buttons or cards to leave breathing room between the focus outline and the element, making it visually clearer.
❓ FAQ
QDoes outline-offset affect layout?
ANo. Like outline, outline-offset takes up no layout space and does not affect the element's size or the document flow. Even a negative value that pulls the outline inside the element leaves the content arrangement untouched. It only changes the distance between the outline and the border edge — positive moves it out, negative moves it in.
QDoes outline-offset accept negative values?
AYes. Negative values pull the outline inward, even inside the element, e.g. outline-offset: -3px; makes the focus outline hug the inner edge of a button. If the offset pushes the outline outside the viewport, the browser does not add scrollbars; the out-of-bounds part is simply clipped. Mixing positive and negative offsets creates nice 'inset' focus styles.
QHow do I create a double-stroke effect with outline and offset?
ACombine outline with border: an outer border: 2px solid #333; and an inner outline: 2px solid #fff; outline-offset: -6px;. Since neither affects layout, the two lines overlay to form a double-stroke decoration, commonly used on cards, buttons, and image frames — cleaner than nesting extra divs.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
