p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
1px wh
1px gr
1ps bl
2px wh
2px gr
2px bl
p.ridge {border-style: ridge;}
1px wh
1px gr
1ps bl
2px wh
2px gr
2px bl
p.inset {border-style: inset;}
1px wh
1px gr
1ps bl
2px wh
2px gr
2px bl
p.outset {border-style: outset;}
1px wh
1px gr
1ps bl
2px wh
2px gr
2px bl
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
So, here is how it works:
If the border-style
property has four values:
- border-style: dotted solid double dashed;
- top border is dotted
- right border is solid
- bottom border is double
- left border is dashed
If the border-style
property has three values:
- border-style: dotted solid double;
- top border is dotted
- right and left borders are solid
- bottom border is double
If the border-style
property has two values:
- border-style: dotted solid;
- top and bottom borders are dotted
- right and left borders are solid
If the border-style
property has one value:
- border-style: dotted;
- all four borders are dotted