6.5 CSS border

Because an HTML element is rendered as a rectangle, it can have up to 4 borders: top, bottom, left and right. You can set a border on all sides at once, or on each side individually.

Border types and location

A CSS border has 3 properties:

• border-color defined by using a color unit
• border-style can be solid, dashed, dotted…
• border-width defined by using a size unit

It also has 4 possible sides:

• border-top
• border-bottom
• border-left
• border-right

blockquote{ border-color: yellow; border-style: solid; border-width: 1px;}

The shorthand property border allows to define all 3 properties at once:

blockquote{ border: 1px solid yellow;}

Single border

If you want to set a border on only one of the four sides, you need to include the border’s position in the CSS property. For example, for a bottom border, you can write:

blockquote{ border-bottom-color: yellow; border-bottom-style: solid; border-bottom-width: 1px;}

As for the border property, each side has its shorthand version:

blockquote{ border-bottom: 1px solid yellow;}

What if I want 3 borders? Do I have to set them individually?

As you would have guessed, the quickest way to have 3 borders is to set all 4 of them and then remove the one you don’t want:

blockquote{ border: 1px solid yellow; border-left: none;}

Shorthand combinations

Because there exist 3 border properties and 4 border locations, there are 12 combinations possible:

That’s a lot of CSS properties available. You’ll usually end up using the 5 shorthand versions only:

• border
• border-top
• border-bottom
• border-left
• border-right