The outline-offset property specifies the space between border and outline.
An outline is a focus indicator that looks like a border.
Outlines do not take up space and can overlap adjacent elements.
An element with a thin border, and a thick outline with an offset specified by outline-offset.
<style>
.outline-offset {
border: 1px solid steelblue;
outline: 5px solid lightblue;
outline-offset: 10px;
padding: 25px;
margin: 20px;
}
</style>
<div class="outline-offset">
An element with a border and an offset outline.
</div>
The outline-offset property accepts any length value, such as, px, pt, em, etc.
By default, the outline is rendered outside the border without space.
When the outline is 0 or none, it's not visible.
Outlines are designed to draw attention to the element.
outline-offset: length | initial | inherit;
| Value | Description |
|---|---|
length |
Default value is 0, sets the gap between border and outline. |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
This table shows when outline-offset support started for each browser.
 Chrome
|
4.0 | Jan 2010 |
 Firefox
|
3.5 | Jun 2009 |
 IE/Edge
|
15.0 | Apr 2017 |
 Opera
|
10.5 | Mar 2010 |
 Safari
|
3.1 | Mar 2008 |
