The Border-Color Properties





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.


     Python   SQL   Java   php   Perl 
     game development   web development   internet   *nix   graphics   hardware 
     telecommunications   C++ 
     Flash   Active Directory   Windows