CSS: The Missing Manual

Adding Borders

A border is simply a line that runs around an element. As shown back in Figure 7-1, it sits between any padding and margins you set. A border around every edge can frame an image or mark the boundaries of a banner or other page element. But borders don't necessarily have to create a full box around your content. While you can add a border to all four edges, you can just as easily add a border to just the bottom or any combination of sides. This flexibility lets you add design elements that don't necessarily feel like a border. For example, add a border to the left of an element, make it around 1em thick, and it looks like a square bullet. A single border under a paragraph can function just like the <hr> (horizontal rule) by providing a visual separator between sections of a page.

You control three different properties of each border: color, width, and style. The color can be a hexadecimal number, a keyword or an RGB value, just like with text (see Section 6.1.2). A border's width is the thickness of the line used to draw the border. You can use any CSS measurement type (except percentages) or the keywords thin, medium, and thick. The most common and easily understood method is simply pixels.

Finally, the style controls the type of line drawn. There are many different styles, and some look very different from browser to browser, as you can see in Figure 7-7. You specify the style with a keyword. For example solid draws a solid line and dashed creates a line made up ...