The Border Properties Group

A border is a way to highlight an element. It is placed between an element's padding and its margin. Figure 8.8 shows an example of using a border around an element.

Figure 8.8. An element with padding and a border.

Twenty border properties form the border properties group, and you can set the width, color, and style of a border in various combinations. Five properties let you set the width, color, and style at the same time on one or more of the four borders of an element:

• border-left

• border-right

• border-top

• border-bottom

• border

We generally recommend that you use these five properties. The remaining 15 are useful if you need to set only one aspect of a border; that is, only the width, only the color, or only the style. You can set these on one or more borders in any combination:

• border-left-color

• border-right-color

• border-top-color

• border-bottom-color

• border-color

• border-left-style

• border-right-style

• border-top-style

• border-bottom-style

• border-style

• border-left-width

• border-right-width

• border-top-width

• border-bottom-width

• border-width

A border can be applied to any element. When applied to an inline element that contains text that spans more than line, the browser may render one border per line and possibly omit the edges. For example, the style sheet

EM { border: solid; padding: 1ex }

applied to this text

 This line contains a <EM>long piece of emphasized text, so long in fact that it is likely to be broken across lines</EM> somewhere in the middle.

may produce this result:

The border is not closed at the end of the first line to indicate that it continues on the next line. This behavior is browser-specific; that is, the browser doesn't have to do this. With some borders, especially the 3D borders (groove, ridge, inset, and outset), closing the border may look better.