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 ...

Get Spring Into HTML and CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.