Setting the Border

You can create a border around an element and then set its thickness, style, and color. If you've specified any padding (see page 176) the border encloses both the padding and the contents of the element.

Type border-style: type, where type is none, dotted, dashed, solid, double, groove, ridge, inset, or outset.

Type border-width: n, where n is the desired width, including abbreviated units (for example, 4px).

Type border-color: color, where color is a color name or rgb color (see page 126 and the inside back cover).

Tips

Borders are not inherited.
The individual border properties (border-width, border-style, and border-color) can have from one to four values. If you use one value, it is applied to all four sides. If you use two, the first is used for the top and bottom, and the second for the right and left. If you use three, the first is used for the top, the second for the right and left, and the third is used for the bottom. And if you use four, they are applied to the top, right, bottom, and left, in clockwise order.

Figure 11.47. In this mini-example, I set the padding and default border for each paragraph. Then for the first paragraph, I set the border width for all four sides, and then the style for each side. For the four remaining paragraphs, it was easier to repeat the 10px then to separate the style and color into two separate properties.
You must define at least the style for a border to display. If there's no style, there will be no border. The default is none.
If you use a shortcut, like border or border-left (etc.), the properties you don't give values for are set to their defaults. So border: 1px black means border: 1 px black none, which means you won't get a border (even if you specified a style earlier with border-style).
The default color is the value of the element's color property (see page 160).
The width can also be expressed in generic terms: thin, medium, and thick. The default is medium.
IE (up to and including version 7) cannot display very dark two-tone border styles like groove, ridge, outset, and inset. They come out solid.18
The border property can be used for tables and their cells. For more details, consult Adding a Border on page 230.
Frankly, I think someone went a bit over the top in thinking up different ways to set the border properties.

Setting the Border

Figure 11.44. When you make a link out of an `img` element, the image is displayed with a blue border by default in most browsers. In this example, it's easier to remove the border from the `img` element than from `a` elements, though we could do that, too.

Figure 11.45. Notice that since a right border is applied to the entry div and not the main div, it stops and starts for each entry. Also, now that the photos don't have that annoying default border, there is enough space between them and the text.

Figure 11.46. The footer has a top border that is the same color but that is dotted instead of dashed.

Figure 11.48. Firefox for Macintosh is shown on the left, IE 7 for Windows is on the right. The styles are very similarly displayed, but not exactly the same. Note, for example, how IE's dots are actually round and how Firefox's shading is lighter and more pronounced.

Setting the Border

Figure 11.44. When you make a link out of an img element, the image is displayed with a blue border by default in most browsers. In this example, it's easier to remove the border from the img element than from a elements, though we could do that, too.

Figure 11.45. Notice that since a right border is applied to the entry div and not the main div, it stops and starts for each entry. Also, now that the photos don't have that annoying default border, there is enough space between them and the text.

Figure 11.46. The footer has a top border that is the same color but that is dotted instead of dashed.

Figure 11.48. Firefox for Macintosh is shown on the left, IE 7 for Windows is on the right. The styles are very similarly displayed, but not exactly the same. Note, for example, how IE's dots are actually round and how Firefox's shading is lighter and more pronounced.

Figure 11.44. When you make a link out of an `img` element, the image is displayed with a blue border by default in most browsers. In this example, it's easier to remove the border from the `img` element than from `a` elements, though we could do that, too.