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
• Percentages: n/a
• Media: visual
• Computed value : <length> value in absolute units

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

Syntax

outline-offset:  <length> | 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;
}

The code above produces this effect:

outline: offset 5px;

Another example:

outline: multiple offsets;

Browser compatibility

See also

outline , outline-width , outline-style , outline-color , outline-offset , -moz-outline-radius , -moz-outline-radius-topleft , -moz-outline-radius-topright , -moz-outline-radius-bottomright , -moz-outline-radius-bottomleft