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
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0 | 1.5 (1.8) | Not supported | 9.5 | 1.2 (125) |
Mobile browsers
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | NA | NA | NA | NA | NA |