UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
The outline-offset property in CSS offsets a defined outline from an element’s border edge by a specified amount. An outline, which is different from a border, does not take up any space on the page (like an absolutely positioned element) so the outline can be offset in any amount and it will not affect the position or layout of surrounding elements.
.example {
outline: solid 2px blue;
outline-offset: 10px;
}Outlines defined using the outline property are often used as focus rings, for accessibility. Thus, the outline-offset property allows you to change the position of the focus ring.
Values
outline-offset accepts one kind of value, a length, which can be:
0(the default)- Any other valid length with a specified unit (including negative values)
Note that outline-offset, like outline-width, does not accept percentage values.
Positioning of the Outline
By default an element’s outline is drawn immediately outside the border (or immediately outside where the border would be drawn if a border was defined). Therefore, it’s technically possible to combine outline and border for a two-border effect:
From there, outline-offset can be used to change the position of the outline relative to the border edge. Try the demo below which allows you to interactively change the outline’s offset value using the slider. The value of the offset is displayed on the page as you move the slider:
As mentioned above, outline-offset accepts negative values, which will offset the outline in the opposite direction (towards the center of the element), as shown in the next interactive demo. Notice the outline starts at -40px:
If you view the above demo in Firefox, you’ll notice the outline appears correct at first but when the slider is adjusted the outline doesn’t render smoothly and ends up in the wrong position. Scrolling the element out of view, then back into view, forces the browser to repaint the outline in the correct position. This seems to be a Firefox-only bug.
Not Part of outline Shorthand
Similar to the border property, the outline property is a shorthand that represents three properties: outline-color, outline-style, and outline-width.
The outline-offset property, therefore, is not represented in this or any other shorthand property, so it needs to be declared separately from the defined outline itself.
Related
More Information
Browser Support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 115 | 115 | 2.1 | 3.2 |
The “partial” indicator for IE means IE does not support outline-offset, but does support outline shorthand and the three properties it represents.
In addition to the bug mentioned above in the “Positioning of the Outline” section, there is a bug in Firefox where the outline is drawn incorrectly if the element has a child element that overflows the parent boundary (e.g. using negative margins or absolute positioning). Therefore, the outline-offset value will be relative to the extended boundary created by the overflowing child, rather than the original parent element boundaries. To understand this better, see this CodePen, this Stack Overflow thread, and this bug report (credit to reader Matt Vanes for sending in this bug).
