Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP

15.3. Element Borders

Borders are among the most versatile CSS properties. As you saw in Figure 15-2, every element in an XHTML document can have a border. However, that figure showed only one type of border, a single, thin, black line around the entire element. Each side of an element can have a different border, all controlled by CSS properties corresponding to width, style (solid, dashed, dotted, and so on), and color of the border. The following sections detail how each of the respective CSS properties can be used to affect borders.

15.3.1. Border Width

The width of an element's border can be specified using the border width properties, which include the following:

• border-top-width

• border-right-width

• border-bottom-width

• border-left-width

• border-width

As with other properties that affect multiple sides of an element, there are border width properties for each side and a shortcut property that can be used for all sides, border-width.

The border-width shortcut property accepts one to four values. The way the values are mapped to the individual sides depends on the number of values specified. The rules for this behavior are the same as those used for the padding property. See the "Element Padding" section earlier in this chapter for the specific rules.

As with other properties, the width can be specified in absolutes or relative units. For example, the first style in the following code example sets all of an element's borders to 2 pixels wide. The second style sets all of an element's ...