outline-offset
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.
The outline-offset
CSS property sets the amount of space between an outline and the edge or border of an element.
Try it
outline-offset: 4px;
outline-offset: 0.6rem;
outline-offset: 12px;
outline: 5px dashed blue;
This is a box with an outline around it.
#example-element {
border: 2px solid crimson;
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
Syntax
css
/* values */
outline-offset: 3px;
outline-offset: 0.2em;
/* Global values */
outline-offset: inherit;
outline-offset: initial;
outline-offset: revert;
outline-offset: revert-layer;
outline-offset: unset;
Values
Description
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.
Formal definition
Initial value | 0 |
---|---|
Applies to | all elements |
Inherited | no |
Computed value | as specified, but with relative lengths converted into absolute lengths |
Animation type | a length |
Formal syntax
Examples
Setting outline offset in pixels
HTML
html
Gallia est omnis divisa in partes tres.
CSS
css
p {
outline: 1px dashed red;
outline-offset: 10px;
background: yellow;
border: 1px solid blue;
margin: 15px;
}
Result
Specifications
Specification |
---|
CSS Basic User Interface Module Level 4 # outline-offset |