border-color: #FF0000 #FFFF00 #00FF00 #00FFFF;

border-color

value: <border-color>{1, 4}
initial value: transparent
inherited: no
percentages: N/A
applicable to: all elements

The border-color attribute allows you to specify what color of border you wish to have for the element specified. The border-color property is shorthand for:

  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color

The value for border-color can have from 1 to 4 different colors stated. If more than one color is stated, the first color given will start on the top border, then right, bottom and left. If only two colors are stated, the first color will be on the top and bottom border, the second on the left and right.

You may use hexidecimal, any of the standard color names or RGB values for the colors. The border-color can also be set to "transparent", which is the default value, to negate a color from a separate styling source.

A border-color will only display if a border-width and border-style has been specified for the element.

The border-color attribute is not inherited. Any element can have a border with a border-color specified.

Example:

h1 {border-width: 2px; border-style: solid; border-color: #772200;}
.quotebox {border-width: 4px; border-style: dotted; border-color: red green;}
.giftbox {border-style: 7px; border-style: groove; border-color:rgb(254,179,52) }

My Heading

.quotebox
.giftbox

 

Note that the corners will be split at an angle for two different colors for solid borders.