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-colordefined by using a color unit
border-stylecan be solid, dashed, dotted…
border-widthdefined by using a size unit
It also has 4 possible sides:
The shorthand property
border allows to define all 3 properties at once:
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:
As for the
border property, each side has its shorthand version:
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:
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: