outline-offset property CSS Reference

Definition and Usage

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 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

.example {
  outline: dashed thin;
  /* Move the outline 3px away from the border */
  outline-offset: 3px;
}

Result:

outline: offset 5px;

outline: multiple offsets;

Compatibility

Desktop browsers

Mobile browsers