Spring Into 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-bottomborder-widthborder-styleborder-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 ...