5 out of 5 rated this helpful - Rate this topic

border-bottom-color property

Specifies the foreground color of the bottom border of an object.

CSS Backgrounds and Borders Module Level 3, Section 4.1

Syntax

border-bottom-color: <color> | currentColor | transparent | inherit

Property values

One of the following values:

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	currentColor

Standards information

CSS Backgrounds and Borders Module Level 3, Section 4.1

Remarks

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-bottom-color CSS property and the borderBottomColor scripting property to specify the color of the bottom border.

This example uses a call to an embedded (global) style sheet to change the color of the bottom border to "blue" when an onmouseover event occurs.

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

HTML


<head>
<style>
td {
  border-bottom-color: red;
  border-width: 0.5cm;
  border-style: groove;
}
.blue {
  border-bottom-color: blue;
}
</style>
</head>

<body>

<table>
  <tr>
    <td onmouseout="this.className=''" onmouseover="this.className='blue'"></td>
  </tr>
</table>

This example uses inline scripting to change the color of the bottom border to "blue" when an onmouseover event occurs.

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