Adding Borders and Drop Shadows - Beginning CSS3 - page 182

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

Property Description

border-color Defines the color of each border.

border-style

Defines the style of each border.

border-width Defines the width of each border.

border-top Sets the color, style, and width of the top border.

border-right Sets the color, style, and width of the right border.

border-bottom Sets the color, style, and width of the bottom border.

border-left

Sets the color, style, and width of the left border.

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.