Outline
The outline property in CSS draws a line around the outside of an element. It’s similar to border except that:
- It always goes around all the sides, you can’t specify particular sides
- It’s not a part of the box model, so it won’t affect the position of the element or adjacent elements (nice for debugging!)
div {
outline: 4px solid blue;
}
Outline has 4 modes:
- The outline-width property is used to set the width of the outline.
div {
outline-width: thick;
}
- The outline-style property is used to set the line style for the outline.
div {
outline-style: double;
}
- The outline-color property is used to set the color of the outline.
div {
outline-color: blueviolet;
}
- The outline-offset property is used to specifies the space between an outline and the edge or border of an element.
div {
outline: 4px solid red;
outline-offset: 15px;
}