CSS Property border-color
border-color property sets the color for the
whole border or sets a different color for each of the four sides.
We can individually change the color of the bottom, left, top and right sides of an element's border using the following CSS properties:
- border-bottom-color changes the color of bottom border.
- border-top-color changes the color of top border.
- border-left-color changes the color of left border.
- border-right-color changes the color of right border.
Summary
| Item | Value |
|---|---|
| Inherited | No. |
| Version | CSS1 |
| JavaScript syntax | object.style.borderColor="#FF0011 red" |
| Applies to | All elements. |
CSS Syntax
border-color: color [ color color color]
The following code shows the rules for default border color value.
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
Property Values
The property values are listed in the following table.
| Value | Description |
|---|---|
| color | Set the color. Default color is black. |
| transparent | Set border color to transparent. Default value |
| inherit | Inherit the border color from the parent element |
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
border-color |
Yes | Yes | Yes | Yes | Yes |
Example
An example showing how to use border-color CSS property.
<!DOCTYPE HTML>
<html>
<head>
<style>
div{ text-align: center;<!-- w ww. j a va 2s.c o m-->
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>