Loading lesson path
Concept visual
Start from A
Overview
The outline-offset property adds a space between an outline and the edge/border of an element. The space between an element and its outline is transparent. The following example specifies an outline 15px outside the border edge: This paragraph has a black border and a red outline 15px outside the border edge.
Example p {
margin: 30px;
padding: 5px;
border: 1px solid black;outline:
3px solid red;
outline-offset: 15px;
}
The following example shows that the space between an element's border and its outline is transparent:This paragraph has an outline of 15px outside the border edge.
Example p {
margin: 30px;
padding: 5px;background:
yellow;
border: 1px solid black;outline:
3px solid red;
outline-offset: 15px;
}The following example shows the use of an outline-offset with a negative value, now the outline will be placed inside the border edge:
Formula
This paragraph has a black border and a red outline - 5px inside the border edge.Example p {
margin: 30px;
padding: 5px;background:
yellow;
border: 1px solid black;outline:
3px solid red;
outline-offset: -5px;
}Formula
A shorthand property for setting outline - width, outline - style, and outline - color in one declaration outline - colorFormula
Specifies the space between an outline and the edge or border of an element outline - style