outline-offset

The outline-offset CSS property is used to set space between an outline and the edge or border of an element. An outline is a line that is drawn around elements, outside the border edge.

Initial value	0
Applies to	all elements
Inherited	no
Media	visual, interactive
Computed value	as specified, but with relative lengths converted into absolute lengths
Animatable	yes, as a length
Canonical order	the unique non-ambiguous order defined by the formal grammar

The space will be transparent (the parent will determine the background).

Syntax

/* <length> values */
outline-offset: 3px;
outline-offset: 0.2em;

/* Global values */
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;

Values

<length>

The width of the space. See <length> for possible units. Negative values place the outline inside the element.

Formal syntax

<length>

Examples

p {
  outline: dashed thin;
  /* Move the outline 10px away from the border */
  outline-offset: 10px;
  border:1px solid black;
}

Html

<p>outline: offset 10px. Border is solid and outline is dashed</p>

The code above produces this effect:

Another example:

outline: multiple offsets;

Specifications

Specification	Status	Comment
CSS Transitions The definition of 'outline-offset' in that specification.	Working Draft	Defines outline-offset as animatable.
CSS Basic User Interface Module Level 3 The definition of 'outline-offset' in that specification.	Candidate Recommendation	Initial definition

Browser compatibility