The border-color property (CSS Reference)
Introduction
This property can be used to define the color of the border.
To give all 4 borders different colors you have two possibilities: The first
one is to declare the colors in one definition separated with a space – something
like this:
border-color:#FF0000 red green yellow;
If you use it this way, then you have to follow some rules:
|
Amount of colors:
|
Description:
|
|
1 color
(border-color:red)
|
If you use only one color, then it will be used for all
four borders.
|
|
2 colors
(border-color:red blue)
|
The first color will be used for the top and bottom border
and the second one for the left and right border.
|
|
3 colors
(border-color:red blue green)
|
The first color will be used for the top, the second for
left and right, and the third for the bottom border.
|
|
4 colors
(border-color:red blue green yellow)
|
The first one will be used for the top, the second one for
right, the third one for bottom, and the fourth for the left border.
|
The second option is to define the colors with the sub-properties
of border-color:
|
Sub-Property:
|
Description:
|
|
border-top-color
|
Defines the color for the top border.
|
|
border-left-color
|
Defines the color for the left border.
|
|
border-right-color
|
Defines the color for the right border.
|
|
border-bottom-color
|
Defines the color for the bottom border.
|
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>border-color
Demonstration</title>
<style type="text/css">
p.border
{
border-top-color:red;
border-left-color:blue;
border-right-color:green;
border-bottom-color:black;
border-width:4px;
border-style:solid;
padding:8px
}
</style>
</head>
<body>
<h1><p class="border">All borders
should have a different color.</p></h1>
</body>
</html>
Output
Values
|
Name:
|
Description:
|
|
color
|
The color can be defined in following three ways: (All
three colors are red)
color name (red)
hex (#FF0000)
rgb (255,0,0)
|
|
Email TopXML