CSS Properties

Page 4

Border Properties

There are many border properties, but they are extremely intuitive. The base categories are border-color, border-width and border-style. Using these properties will affect all four sides of an elements' borders. Alternatively, you can form twelve others by naming the border side to be styled. Examples include border-right-width, border-top-style, and border-bottom-color.

Styling borders is most useful when using CSS for layout, but it may be used in many contexts. For example, it may be used to decorate links as an alternative to simple underlining.

border-color, border-width

The colors which can be applyied to borders are no different than for text, and the widths of borders can be specified with the same absolute and relative units mentioned in the fonts section. Since the borders will only appear if a style is assigned, we'll use 'solid' for this example.

Example

CSS

.overline {border-top-width:3px; border-top-color:#ff0000; border-top-style:solid;}
.underline {border-bottom-width:1px; border-bottom-color:#ff0000; border-bottom-style:solid;}

Markup

<body>
<p class="overline">TV channel 11 in Atlanta has just advised us to turn off "and unplug" our home computers to keep them from being vandalized by web site hackers.</p>
<p class="underline">This is the same station that told us our cars weren't going to start on the morning of January 1, 2000, because of the Y2K problem.</p>
</body>

Display

TV channel 11 in Atlanta has just advised us to turn off "and unplug" our home computers to keep them from being vandalized by web site hackers.
This is the same station that told us our cars weren't going to start on the morning of January 1, 2000, because of the Y2K problem.

border-style

Using this property, borders can be styled as none, hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset. Default for most cases is none. In most cases, hidden will render the same way as none. If you're interested in details on the instances in which they differ, you can reference W3C's document about border conflict resolution for table elements.

Dotted and dashed borders are attractive, but will not always display correctly in IE6. A value of solid will result in a standard solid border, while a value of double will result in a double border which will only display correctly if given a width of at least 3 pixels - one pixel for each of the borders, and one for the space in between.

A border styled as groove is the opposite of ridge, and inset is the opposite of outset. These are styles which are better shown than described.

Examples
5px solid border
5px groove border
5px ridge border
5px inset border
5px outset border