Cascading Style Sheets: The Definitive Guide

Borders

The border of an element is simply a line (sometimes more than one) that surrounds the content and padding of an element. Thus, the background of the element will stop at the outer edge of the border, since the background does not extend into the margins, and the border is just inside the margin. The CSS specification strongly implies that the background extends to the outside edge of the border, since it talks about the borders being drawn “on top of the background of the element,” but not all browsers seem to agree. This is important because some borders are “intermittent”—for example, dotted and dashed styles—and the element’s background should appear in the spaces between the visible portions of the border.

Every border has three aspects: its width, or thickness; its style, or appearance; and its color. The default value for the width of a border is medium , which is not explicitly defined but usually works out to be two or three pixels. Despite this, the reason you don’t usually see borders is that the default style is none, which prevents them from existing. If a border has no style, then it may as well not exist, so it doesn’t. The absence of a border style also resets the width, but we’ll get to that in a little while.

Finally, the default border color is the foreground color of the element itself. If no color has been declared for the border, then it will be the same color as the text of the element. If, on the other hand, an element has no text—let’s say a table ...