CSS outline-offset Property

Specify a 4 pixels solid red outline 15 pixels outside the border edge:

div {
outline: 4px solid red;
outline-offset: 15px;

Try it Yourself »

Definition and Usage

The outline-offset property adds space between an outline and the edge or border of an element.

The space between an element and its outline is transparent.

Outlines differ from borders in three ways:

  • An outline is a line drawn around elements, outside the border edge
  • An outline does not take up space
  • An outline may be non-rectangular
Default value: 0
Inherited: no
Animatable: yes, see individual propertiesRead about animatable – Try it
Version: CSS3
JavaScript syntax: object.style.outlineOffset=”15px” Try it
CSS Syntax
outline-offset: length|initial|inherit;
Property Values
Value Description
length The distance the outline is outset from the border edge. Default value is 0
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit