border-color

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value Value of color fitted by parameter color
Inherited No
Applied To all elements
HTML analog <img border > | <table border>
Reference to specification http://www.w3.org/TR/CSS21/box.html#propdef-border-color

Description
Sets the border color at different element's sides. Parameter allows to fit the border color at the same time in all element's sides or to define the border color only in specified sides.

Syntax

border-color: color {1,4}

Arguments
You can use only one, two, three or four parameters dividing them by the spacing. Result depends on element's amount and is shown in the table 1.





Tab.1. Color changing depending on arguments' amount
Argument amount Result
1 Frame color will be set for all element's sides
2 The first argument sets the color of top and bottom sides and the second one for left and right sides
3 The first argument defined the color of the top side, the second one - left and right sides at the same time, the third one - for the bottom side
4 The color of top, bottom, right and left sides is set in turn



Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>border-color</title>
  <style type="text/css">
   H1 { 
    border-color: red white; /* Border color */ 
    border-style: solid; /* Border style */  
   }
   P { 
    border-color: #008a77; /* Border color */
    border-style: solid; /* Border style */
    padding: 5px; /* Areas around the text */
   }
  </style>
 </head>
 <body>
 
  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 
 </body>
</html>

The result of this example is shown on the figure 1

Object model

[window.]document.getElementById("elementID")style.borderColor