Recipe 4.4. Placing a Page Border

Problem

You want to place a visual frame or border around a web page, as in Figure 4-9.

Figure 4-9. A framed web page

Solution

Use the border property on the body element:

body {  margin: 0;  padding: 1.5em;  border: 50px #666 ridge; }

Discussion

The border property is a shorthand property, in that it enables you to set the width, color, and style of the border around an element in one step instead of three. If you didn't use this shorthand property in the preceding solution, you would have to replace the line that reads border: 50px #666 ridge; with the following three lines:

border-width: 50px; border-color: #666; border-style: ridge;

You can create a framing effect with other styles as well, such as dotted, dashed, solid, double, groove, inset, and outset (see Figure 4-10).

Figure 4-10. The available border styles in CSS

Note that groove style is the inverse of the shades of shadow as seen in the solution, which uses the ridge value.

The only browser incompatibilities to worry about are in Internet Explorer 5 for Macintosh and Internet Explorer for Windows, where the dotted style appears as aliased circles, whereas in Netscape 6+, Firefox, Mozilla, and Safari, the dotted style appears as blocks.

You also can place a stylized border on images as well. Instead of having a default solid line, try experimenting in your designs with groove or double borders like the one in Figure 4-11:

img.left {  float: left;  margin-right: 7px;  margin-bottom: 3px;  border: 4px double #666; }  

Figure 4-11. A double border around an image

See Also

Recipe 2.15 for creating pull quotes with different border styles.