HTML and CSS Reference
In-Depth Information
Styling Outlines
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
other styles.
•
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
Property
Initial Value
Description
outline-width
medium
Sets the width of the outline using a length or one of the keywords
thin
,
medium
, or
thick
.
outline-style
none
Sets the style of the outline using the same keywords as
border-style
except
hidden
.
outline-color
invert
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.
outline
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
aesthetically unacceptable.
