The Border-Color Properties

The border-color property sets the color of a border. The color may be specified using any one of 16 predefined named colors or a numbered RGB color. (See Chapter 10 for more information about specifying colors.)

Name:	border-color
Value:	<color>{1,4}
Initial:	taken from the color property of the element
Applies to:	all elements
Inherited:	no
Percentages:	N/A

Name:	border-top-color, border-right-color, border-bottom-color, border-left-color
Value:	<color>
Initial:	taken from the color property of the element
Applies to:	all elements
Inherited:	no
Percentages:	N/A

With the border-color property, you set all colors on all four borders at once, as follows:

• One value is set That value applies to all four sides.

• Two values are set The top and bottom borders are set to the first value, and the right and left borders are set to the second.

• Three values are set The top border is set to the first value, the right and left borders are set to the second, and the bottom border is set to the third.

• Four values are set The values are applied in top, right, bottom, and left order.

The following are examples of code for using the border-color property in these various ways:

 /* All borders will be red */ BODY { border-color: red } /* The top and bottom borders will be red,    and the left and right borders will be black */ BODY { border-color: red black } /* The top border will be red, the left and    right borders will be black, and the bottom    border will be yellow */ BODY { border-color: red black yellow } /* All colors will be set, and values will be    applied in top/right/bottom/left order */ BODY { border-color: red black yellow green }

If no color is specified for a border, it takes the color of the element itself. For example, in this case:

 P {   color: black;   background: white;   border: solid }

the border does not have a color specified, so it is black, which is the same as the text of the P element.