outline-offset

Summary

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

Formal syntax: <length>

outline-offset: 3px
outline-offset: 0.2em

outline-offset: inherit

Values

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

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 Basic User Interface Module Level 3 The definition of 'outline-offset' in that specification.	Working Draft	Initial definition
CSS Transitions The definition of 'outline-offset' in that specification.	Working Draft	Defines `outline-offset` as animatable.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	1.5 (1.8)	Not supported	9.5	1.2 (125)

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	?	?	?	?