HTML and CSS Reference
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.
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.
outline-style : none | solid | dotted | dashed | double |
groove | ridge | inset | outset
This property allows the same values as border-style , except that hidden is not a
valid outline-style . They are also rendered the same, as illustrated in Figure 18-1 .
Figure 18-1. Outline-style appearances
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 .
outline-width : <length> | thin | medium | thick