CSS Border Individual Sides

Itacen Sabacok | May 5, 2021

border attribute has properties for each border. so it is possible to specify a different border for each side.

1div {
2  border-top-style: solid;
3  border-right-style: dotted;
4  border-bottom-style: dashed;
5  border-left-style: double;
6}

Sample Output

border-top-style: solid; border-right-style: dotted; border-bottom-style: dashed; border-left-style: double;


TIP

  1. If the border-style property has four values:
  • border-style: solid dotted dashed double;
    • top border is solid
    • right border is dotted
    • bottom border is dashed
    • left border is double
  1. If the border-style property has three values:
  • border-style: solid dotted dashed;
    • top border is solid
    • right and left borders are dotted
    • bottom border is dashed
  1. If the border-style property has two values:
  • border-style: solid dotted;
    • top and bottom borders are solid
    • right and left borders are dotted
  1. If the border-style property has one value:
  • border-style: solid;
    • all four borders are solid