6.5 CSS border

The edges of the rectangle

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:

border border-color border-style border-width
border-top border-top-color border-top-style border-top-width
border-bottom border-bottom-color border-bottom-style border-bottom-width
border-left border-left-color border-left-style border-left-width
border-right border-right-color border-right-style border-right-width

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
Back to top

MarkSheet Video tutorials are coming!

Sign up for the MarkSheet newsletter to get notified!

Close