border-color
Description
border-color property sets the color for the whole border or sets a different color for each of the four sides.
| Item | Value |
|---|---|
| Inherited | No. |
| Version | CSS1 |
| JavaScript syntax | object.style.borderColor="#FF0011 red" |
| Applies to | All elements. |
border-color:red green blue pink;
is equal to
- top border is red
- right border is green
- bottom border is blue
- left border is pink
border-color:red green blue;
is equal to
- top border is red
- right and left borders are green
- bottom border is blue
border-color:red green;
is equal to
- top and bottom borders are red
- right and left borders are green
border-color:red;
is equal to
- all four borders are red
Syntax and Property Values
border-color: color [ color color color]
The property values are listed in the following table.
| Value | Description |
|---|---|
| color | Set the color. |
| transparent | Set border color to transparent. Default value |
| inherit | Inherit the border color from the parent element |
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
div{ text-align: center;<!--from ww w .jav a2 s . c om-->
margin-bottom: 1em;
padding: .5em;
border-width: thick;
border-color: blue;
border-style: groove;
}
</style>
</head>
<body>
<div>this is a test. </div>
</body>
</html>
The code above generates the following result.
