HTML and CSS Reference
An outline is similar to a border in that it's drawn around an element, but it differs in the following ways:
An outline doesn't add to the overall width or height of an element. It's drawn on top of
An element can have both an outline and a border. Browsers normally draw the outline
outside the border.
All sides of an outline must be the same. They can't be styled independently.
The outline of an inline element surrounds the whole element. Unlike a border, it doesn't
break when the element wraps to another line (see Figure 9-27 ).
Figure 9-27. Most browsers draw an outline as an irregular box around inline elements
There are three individual properties for outlines and a shorthand one, as described in Table 9-5 .
Table 9-5. Outline Properties
Sets the width of the outline using a length or one of the keywords thin ,
medium , or thick .
Sets the style of the outline using the same keywords as border-style
except hidden .
Sets the color of the outline using any color format. The default is invert ,
which performs a color inversion of the pixels on the screen to ensure the
outline is visible. If the browser doesn't support color inversion, it defaults
to the same color as the current text.
Shorthand property that sets all three values in a single declaration.
Perhaps the most common use of the properties in Table 9-5 is not to add an outline, but to remove it.
Most browsers automatically add a dotted line around links and other clickable elements when they have focus.
This is known as a focus rectangle , an accessibility feature designed to help people who use the keyboard to
navigate around websites. Although it's there for an important reason, many designers find the focus rectangle