Cascading Style Sheets: The Definitive Guide, Second Edition

Outlines

CSS2 introduces a last major piece of user interface styling: outlines. An outline is sort of a like a border, but there are two very important differences. First, outlines do not participate in the flow of the document like borders do, and thus don’t trigger document reflow as they appear and disappear. If you give an element a 50-pixel outline, the outline will very likely overlap other elements. Second, outlines can be nonrectangular—but don’t start leaping for joy just yet. This does not mean that you can create circular outlines. Instead, it means that an outline on an inline element may not act like a border would on that same element. With an outline, a user agent is allowed to “merge” the pieces of the outline to create a single continuous, but nonrectangular, shape. Figure 13-10 shows an example.

Figure 13-10. Outlines can have irregular shapes

User agents are not required to support nonrectangular outlines. They could instead format outlines on inline nonreplaced elements the same way they do borders. A conforming user agent must, however, make sure that outlines do not take up layout space.

There is one other basic way in which outlines and borders differ: they aren’t the same thing, and so they can both exist on the same element. This can lead to some interesting effects, such as that illustrated in Figure 13-11.

Figure 13-11. The coexistence of borders and outlines ...