outline-offset
Sets the gap between the outline and the element's border. Positive values move the outline outward, negative values move it inward. Useful for separating the focus ring from the element for clearer visual feedback.
Class List
Pattern-based classes. Use the oo{N}px format combining a number with a unit.
| Class | CSS | Description |
|---|---|---|
oo1px | outline-offset: 1px | outline spacing 1px |
oo2px | outline-offset: 2px | outline spacing 2px |
oo4px | outline-offset: 4px | outline spacing 4px |
oo8px | outline-offset: 8px | outline spacing 8px |
Visual Comparison
Visually compares various outline-offset values. outline-style and outline-width must also be set to be visible.
0px (default) — oo0px
2px — oo2px
4px — oo4px
8px — oo8px
Usage Examples
<!-- Outline with offset on focus -->
<input class="py8px px16px br8px bg18181B cFAFAFA bn focus-olss focus-ow2px focus-oo2px" placeholder="Focus here" />
<!-- Various offset comparison -->
<div class="df gap4rem fww">
<div class="olss ow2px p2rem cFAFAFA">No offset</div>
<div class="olss ow2px oo2px p2rem cFAFAFA">offset 2px</div>
<div class="olss ow2px oo4px p2rem cFAFAFA">offset 4px</div>
</div>
<!-- Button Focus ring -->
<button class="py8px px16px br8px bg6366F1 cFFFFFF bn cp focus-olss focus-ow2px focus-oo2px">
Focus ring button
</button>Tips & Notes
outline-style required
Using oo{N}px alone has no effect. Use it together with olss (outline-style: solid) and ow{N}px.
Inward offset with negative values
Using a negative value like neg-oo2px moves the outline inward into the element.
Accessibility focus ring
Applying an offset separates the focus ring from the element for better clarity. An offset of about oo2px improves readability, especially on dark backgrounds.