rs79.vrx.palo-alto.ca.us

The border-color property sets the color of an element's four borders. This property can have from one to four values.

Examples:

  • border-color:red green blue pink;
    • top border is red
    • right border is green
    • bottom border is blue
    • left border is pink

  • border-color:red green blue;
    • top border is red
    • right and left borders are green
    • bottom border is blue

  • border-color:red green;
    • top and bottom borders are red
    • right and left borders are green

  • border-color:red;
    • all four borders are red

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


1px or 1em. Or any number besides "1".

All

Tags: #color #style #thickness #all

00-0-Copr_2017-W3C-inset-outset-bordert.png
00-0-Copr_2017-W3C-inset-outset-border.png
xs sm lg