Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 13th of December 2017 08:03:38 PM

10.6. Borders

In CSS1, there are quite a few properties devoted to setting borders around element boxes, such as border-top-width and border-color, not to mention border itself. CSS2 adds a even more border properties, most of which are aimed at giving the author even more specific control of the borders. Before, it was difficult to set a specific color or style for a given side of the border, except through properties like border-left, and that could require more than one value. The new CSS2 properties address this, and their names are pretty self-explanatory:

border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
margin: top right bottom left
Figure 7-8

Figure 7-8. Uneven margins

A good way to remember this pattern is to keep in mind that the fourvalues go clockwise around the element, starting from the top. Thevalues are always applied in this order, so inorder to get the effect you want, you have to arrange the valuescorrectly.

TIP

An easy way to remember the order in which sides have to be declared, border-left-style



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

WARNING

Percentage values are relative to the font size of the element.

In technical terms, every element in a line generates a content area, which is determined by the size of the font. This content area also generates an inline boxThis will leave us with the following:

<TABLE CELLSPACING=0>
<TR>
<TD>sidebar</TD>
<TD>navigation bar and main display</TD>
</TR>
</TABLE>

We'll turn to the sidebar first. Each set of links is grouped into a list under a main heading; these headings look different from