HTML and CSS Reference
In-Depth Information
Figure 9-2 shows all three examples in a browser (the code is in single_borders.html).
Figure 9-2. Single borders can be used to highlight text
Note that the border under the main heading stretches the full width of the page. There's a proposal in the
draft CSS3 box model to create a new fit-content value for the width property. In the meantime, the simplest
way to make the border under a heading match the width of the text is to wrap the text in <span> tags, and create a
descendant selector like this:
h1 span {
color: #933;
padding-bottom: 3px;
border-bottom-style: solid;
border-bottom-width: 10px;
Using Border Shorthand Properties
To avoid unnecessarily verbose style rules, CSS provides not one, but eight shorthand properties for defining
borders, as listed in Table 9-2 . Their meaning and use is fairly straightforward.
Table 9-2. Border Shorthand Properties
Defines the color of each border.
Defines the style of each border.
Defines the width of each border.
Sets the color, style, and width of the top border.
Sets the color, style, and width of the right border.
Sets the color, style, and width of the bottom border.
Sets the color, style, and width of the left border.
Sets the same color, style, and width for all four borders.
he border-color , border-style , and border-width shorthand properties accept up to four values
following the same formula as the shorthand for margins and padding:
One value: Applies equally to all four sides.
Two values: The first applies to the top and bottom, and the second to the left and right.
Search WWH ::

Custom Search