3 out of 13 rated this helpful - Rate this topic

border-color property

Specifies the border color of the object.

CSS Backgrounds and Borders Module Level 3, Section 4.1

Syntax

border-color: [ <color> | currentColor | transparent ] {1,4} | inherit

Property values

One to four of the first three of the following space-delimited values, or inherit.

color: A supported color value.
currentColor: The computed value of the color property.
transparent: Fully transparent. This keyword can be considered a shorthand for "transparent black" ("rgba(0,0,0,0)"), which is its computed value.
inherit: The value of this property is inherited from this object's parent.

CSS information

Applies To	All elements
Media	visual
Inherited	no
Initial Value	see individual properties

Standards information

CSS Backgrounds and Borders Module Level 3, Section 4.1

Remarks

The border-color property is a shorthand for the following properties:

Up to four different colors can be specified in the following order: top, right, bottom, left.

If one color is supplied, it is used for all four sides.
If two colors are supplied, the first is used for the top and bottom, and the second is used for left and right.
If three colors are supplied, they are used for top, right and left, and bottom, respectively.

The border-color property does not render if the border-style property is set to none.

Some browsers do not recognize color names, but all browsers should recognize RGB color values and display them correctly.

Examples

The following examples use the border-color attribute and the border-color property to specify the border color.

This example uses a call to an embedded (global) style sheet to change the color of the border to "blue" from an initial value of "red" when the mouse moves over the image.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/border-color.htm

HTML


<head>
<style type="text/css">
td {
  border-color: red;
  border-width: 0.5cm;
}
.blue {
  border-color: blue;
}
</style>
</head>
<body>
<table border="">
  <tr>
    <td onmouseover="this.className='blue'" onmouseout="this.className=''">
    <img alt="sphere" src="sphere.jpg"> </td>
  </tr>
</table>
</body>

This example uses inline scripting to change the color of the border to "blue" when the mouse moves over the image.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/borderColor.htm


<td onmouseover="this.style.borderWidth='0.5cm';
                 this.style.borderColor='blue';
                 this.style.borderStyle='solid'">

This example uses embedded styles to change the border from a value of "transparent" to a value of "gold".

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/border-color0.htm