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.
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
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.
outline-width : <length> | thin | medium | thick
CSS does not define the numerical thickness of these three keywords, but they typically render as 1px, 3px, and 5px, respectively. Like border-width, the initial value for this property is medium.
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.
outline-color : invert | <color>
To ensure proper contrast, the specification suggests that the default value be invert, which sets the outline to the opposite of the color underneath. However, only IE 8+ and Opera 7+ actually support this optional value, so it is not commonly used.
outline
outline is a shorthand property for setting all the preceding outline properties in a single declaration.
The values can be specified in any order because there is no ambiguity between them. Either one of them can be left out.
outline: thin solid red;
This has the same effect as setting all the individual properties, but with a more convenient syntax:
outline-width: thin;
outline-style: solid;
outline-color: red;
outline-offset
The space between the outline and the border edge can be set with the outline-offset property introduced in CSS 3.
outline-offset : <length>
The following declaration moves the outline 3 pixels outward. Negative values are allowed, which instead move the outline inside the element.
outline-offset: 3px;
Although this property is not supported in IE, it works in all modern browsers, including Chrome 4+, Firefox 2+, Safari 3.1+, Opera 12.1+, and Edge 15+.
