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


Formal syntax: <length>
outline-offset: 3px
outline-offset: 0.2em
outline-offset: inherit


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


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


outline: offset 5px;

outline: multiple offsets;


Desktop browsers

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0 1.5 (1.8)Not supported9.5 1.2 (125)

Mobile browsers

FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic supportNANANANANA

Relative articles