outline-offset
Pushes the outline away from the element’s edge, or pulls it inward, without changing the page layout.
- Initial value
0- Inherited
- No
- Animatable
- yes, as a length
- Applies to
- all elements
- JavaScript
element.style.outlineOffset = "4px"
Example
#.swatch {
width: 32px;
height: 32px;
border: 0;
border-radius: 50%;
}
.swatch.selected,
.swatch:focus-visible {
outline: 2px solid #e5e5e5;
outline-offset: 3px;
}<p style="margin: 0 0 12px">Avatar color</p>
<div style="display: flex; gap: 14px;">
<button class="swatch" type="button" aria-label="Purple" style="background: #7c3aed"></button>
<button class="swatch selected" type="button" aria-label="Blue" style="background: #0ea5e9"></button>
<button class="swatch" type="button" aria-label="Green" style="background: #10b981"></button>
<button class="swatch" type="button" aria-label="Amber" style="background: #f59e0b"></button>
<button class="swatch" type="button" aria-label="Pink" style="background: #f43f5e"></button>
</div>The selected color has a ring offset by 3px, and the gap shows the page background. The button with keyboard focus gets the same style: click the preview and press Tab.
Definition and usage
#The outline-offset property sets the distance between the outline (outline) and the outer edge of the element’s border. A positive value pushes the outline outward, and a negative one pulls it inward, so it’s drawn over the element’s background and content.
The gap between the element and the outline is transparent, so the parent’s background shows through. That’s how you get the ring-with-a-gap effect you know from color pickers in apps, and from clear focus indicators.
The offset, like the outline itself, doesn’t affect the layout: the element doesn’t grow, and its neighbors don’t shift. You’ll only see it, though, when the outline has a style other than none, for example after setting outline: 2px solid.
The outline shorthand doesn’t include the offset. You set it as a separate declaration, and a later change to outline alone won’t reset it.
Syntax
#outline-offset: <length>;Values
#- The outline sits right at the element’s edge. This is the default value.
<length>
There’s a 4px gap between the element and the outline, through which the parent’s background shows.<length>
The outline surrounds the element at a greater distance, yet still doesn’t take up space in the layout.negative value
The outline moves inward and is drawn over the element’s background. Handy when a parent withoverflow: hiddenwould otherwise clip it on the outside.
Values in practice
#0
.demo { outline-offset: 0; }4px
.demo { outline-offset: 4px; }12px
.demo { outline-offset: 12px; }-6px
overflow: hidden would otherwise clip it on the outside..demo { outline-offset: -6px; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- A 2-3px offset keeps the focus ring from blending into the button’s color, since a strip of the parent’s background separates them.
- If a parent with
overflow: hidden, like a carousel, clips the outline, give it a negative offset. The outline will then be drawn inside the element. - The
outlineshorthand doesn’t set the offset. Writeoutline-offsetseparately, ideally in the same rule as the outline.
Related entries
#- outlineDraws an outline around an element that doesn’t take up space in the layout.
- :focus-visibleMatches a focused element only when the browser decides the indicator should be visible, such as during keyboard navigation.
- borderShorthand that sets the width, style, and color of a border.
- overflowDecides what happens to content that doesn’t fit in an element.
Spotted a mistake or missing an example? Write to us.