Outline
The outline is a line drawn around an element, outside the border edge. It is typically rendered as a dotted line around interactive elements to show which element has focus. Although similar to the border, the outline differs in that it does not take up any space in the box model. Furthermore, unlike the border, all four sides of the outline must be the same. The outline properties can be applied to any element, and none of them inherits.
outline-style
The style of the outline is set with the outline-style property. To display the outline, the value needs to be set to something other than none, which is the default. The outline-style property can have the following values: none, solid, dashed, dotted, double, inset, outset, groove, and ridge. This property allows the same values as border-style, except that hidden is not a valid outline-style.
Example:
h1 {
outline-style: dotted;
}
Outline-width
The thickness of the outline is specified with the outline-width property. Like the border-width property, its value can be a specified length or one of the keywords thin, medium, or thick.
Example:
p {
outline-style: dashed;
outline-width: 10px;
}
Outline-color
The color of the outline can be changed with the outline-color property. In addition to the standard color notations, the keyword invert is also a valid value for this property.
Example:
p {
outline-style: solid;
outline-color: #0000ff;
}
Note: The CSS outline-width or outline-color property does not work if it is used alone. Use the outline-style property to set the style of the outline first.
The Outline Shorthand Property
The outline CSS property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule.
Example:
p {
outline: 5px solid #ff00ff;
}
Outline-offset
The space between the outline and the border edge can be set with the outline-offset property introduced in CSS 3.
Example:
outline-offset: 3px;