The Border Properties

The border properties let you set the border width, color, and style together on one or more borders. They build on the previously discussed properties and are the most commonly used properties to set border characteristics. Four of them let you set the border width, color, and style for each side of the element individually: border-left, border-right, border-top, and border-bottom. The fifth one is border; a shortcut by which you can set all four border properties at once.

Name:	border-top, border-right, border-bottom, border-left, border
Value:	<border-width> | | <border-style> | | <border-color>
Initial:	see the individual properties
Applies to:	all elements
Inherited:	no
Percentages:	N/A

These properties accept all the legal values of border-width, border-style, and border-color. Omitted values are set to their initial values. For example, the rule

P { border: solid red }

sets all borders to solid red. Because border-width is not specified, its initial value medium is assumed. Also, the order in which you list the three values doesn't matter. All the following produces the same result:

 border: thin solid red; border: red thin solid; border: solid red thin;

The following are example rules for using the border-left, border-right, border-top, and border-bottom properties. Figure 8.11 shows the results.

Figure 8.11. Example uses of border properties.