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.



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.
  .outline-offset {
    border: 1px solid steelblue;
    outline: 5px solid lightblue;
    outline-offset: 10px;
    padding: 25px;
    margin: 20px;

<div class="outline-offset">
  An element with a border and an offset outline.

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.


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.

Browser support

This table shows when outline-offset support started for each browser.

4.0 Jan 2010
3.5 Jun 2009
15.0 Apr 2017
10.5 Mar 2010
3.1 Mar 2008

You may also like