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
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0 | 1.5 (1.8) | No support | 9.5 | 1.2 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |
Document Tags and Contributors
Tags:
Contributors to this page:
mfluehr,
scholachoi,
Sebastianz,
Prinz_Rana,
fscholz,
EliasH,
kscarfone,
teoli,
Sheppy,
ethertank,
FredB,
syssgx,
grendel,
Jürgen Jeka,
j.j.,
Ms2ger,
BijuGC,
Waldo
Last updated by:
mfluehr,