Shorthand: Border-Width

Border-width, border-style and border-color can have from one to four values. The values for the border-width property are defined as:

4 Values: border-width: 1px 3px 5px 7px;
  • top border is 1px
  • right border is 2px
  • bottom border is 3px
  • left border is 4px
3 Values: border-width: thin medium thick;
  • top border is thin
  • right and left borders are medium
  • bottom border is thick
2 Values: border-width: 0.5em 1.5em;
  • top and bottom borders are 0.5em wide
  • right and left borders are 1.5em wide
1 Value: border-width: 12px;
  • all four borders are 12 pixels wide.

I've added a 7px padding to each bordered 'division'.

Good habit Remember: In order to have a visible border, you MUST have a border-style defined! For this example it is set to solid.
Back button Table of Contents Next button