The outline-offset
CSS property sets the amount of space between an outline
and the edge or border of an element. An outline is a line that is drawn around an element, outside the border edge. The space between an element and its outline is transparent; in other words, it is the same as the parent element's background.
/* <length> values */ outline-offset: 3px; outline-offset: 0.2em; /* Global values */ outline-offset: inherit; outline-offset: initial; outline-offset: unset;
Initial value | 0 |
---|---|
Applies to | all elements |
Inherited | no |
Media | visual, interactive |
Computed value | as specified, but with relative lengths converted into absolute lengths |
Animation type | a length |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Values
<length>
- The width of the space between the element and its outline. A negative value places the outline inside the element. A value of
0
places the outline so that there is no space between it and the element.
Formal syntax
<length>
Example
p { outline: 1px dashed red; outline-offset: 10px; background: yellow; border: 1px solid blue; margin: 15px; }
<p>Gallia est omnis divisa in partes tres.</p>
Specifications
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'outline-offset' in that specification. |
Working Draft | Defines outline-offset as animatable. |
CSS Basic User Interface Module Level 3 The definition of 'outline-offset' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 | ? | 1.5 | No | 9.5 | 1.2 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? | ? | ? |
Document Tags and Contributors
Tags:
Contributors to this page:
fscholz,
mfluehr,
scholachoi,
Sebastianz,
Prinz_Rana,
EliasH,
kscarfone,
teoli,
Sheppy,
ethertank,
FredB,
syssgx,
grendel,
Jürgen Jeka,
j.j.,
Ms2ger,
BijuGC,
Waldo
Last updated by:
fscholz,