Outline Offset
CSS Outline Offset
An outline and an element’s edge or border are separated by more space thanks to the outline-offset attribute. An element’s outline and surrounding space are translucent.
An outline that is 15 pixels outside the border edge is specified in the example below:
This paragraph has an outline 15px outside the border edge.
Example
p {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
The contour of this paragraph is located 15 pixels beyond the boundary.
This paragraph has an outline of 15px outside the border edge.
Example
p {
margin: 30px;
background: yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
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 |
