The Border-Width Properties

The border-width properties set the widths of the border individually or in any combination. There are five properties:

• Four properties let you set the border width for the left, right, top, and bottom of the element individually: border-left-width, border-rightwidth, border-top-width, and border-bottom-width.

• The fifth one border-width is a shortcut by which you can set all four border widths at once.

These properties can be described by the following definition. Four of the five properties accept only a single value, while border-width accepts up to four values.

Name:	border-width
Value:	[ thin | medium | thick | <length>] {1,4}
Initial:	medium
Applies to:	all elements
Inherited:	no
Percentages:	N/A

Name:	border-top-width, border-right-width, border-bottom-width, border-left-width
Value:	thin | medium | thick | <length>
Initial:	medium
Applies to:	all elements
Inherited:	no
Percentages:	N/A

These properties have keyword and length values:

• thin

• medium This is the default.

• thick

• Length value Either an absolute or relative unit.

When the keywords thin, medium, or thick are used, the actual width of the border depends on the browser. However, medium will be at least as thick as thin, and thick will not be thinner than medium. The thickness remains constant throughout a document. For example, a thick border will be the same thickness throughout the document regardless of any other properties you set. In the following code sample,

 H1 {   border-width: thick;   font-size: 18pt } P {   border-width: thick;   font-size: 12pt }

the borders will be the same width for both the H1 and the P elements, even though the font sizes differ.

Figure 8.10 shows examples of the various border width values.

Figure 8.10. Examples of border-width values.