HTML and CSS —

Border Shorthand

Border shorthand is the most extended shorthand for a single property. You have several shorthand options.

Shorthand for Side, Width, Style, and Color

Each category of shorthand has corresponding shorthand, as follows:

border-right, border-left, border-top, border-bottom

border-width

border-style

border-color

So, you can write this:

border-right: 1px dotted red;

The property then causes the selected element to have a right border of 1 pixel, dotted, and of the color red.

The border Property

This shorthand property sets the width, style, and color for all four sides of the element in question:

border: thick ridge white;

In Figure 11-7, you can see the results for this.

Figure 11-7. Using border shorthand.

NOTE

Unlike with margins (and padding), you cannot set differing widths in the border property itself. Also, if you want to style one border differently than the other three, just add another rule using that border's nonshorthand property, such as border-right-width.