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
Formatted code
p {
margin: 30px;
padding: 5px;
border: 1px solid black;
outline: 3px solid red;
outline-offset: 15px;
}Live preview
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
Formatted code
p {
margin: 30px;
padding: 5px;
background: yellow;
border: 1px solid black;
outline: 3px solid red;
outline-offset: 15px;
}Live preview
CSS Outline Offset with Negative Value
The following example shows the use of an outline-offset with a negative value, now the outline will be placed inside the border edge:
This paragraph has a black border and a red outline -5px inside the border edge.
Example
Formatted code
p {
margin: 30px;
padding: 5px;
background: yellow;
border: 1px solid black;
outline: 3px solid red;
outline-offset: -5px;
}Live preview
All CSS Outline Properties
| Property | Description |
|---|---|
| outline | A shorthand property for setting outline-width, outline-style, and outline-color in one declaration |
| outline-color | Sets the color of an outline |
| outline-offset | Specifies the space between an outline and the edge or border of an element |
| outline-style | Sets the style of an outline |
| outline-width | Sets the width of an outline |