CSS outline-offset Property

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.

Example

#

An element with a thin border, and a thick outline with an offset specified by outline-offset.

An element with a border and an offset outline.
<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>

Using outline-offset

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.

Syntax

outline-offset: length | initial | inherit;

Values

#

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.

Browser support

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

You may also like

Guides