One value, like: p {border-color: red} - all four borders will be red
Two values, like: p {border-color: red transparent} - top and bottom border will be red, left and right border will be transparent
Three values, like: p {border-color: red green blue}- top border will be red, left and right border will be green, bottom border will be blue
Four values, like: p {border-color: red green blue yellow} - top border will be red, right border will be green, bottom border will be blue, left border will be yellow

Syntax

Set the borderColor property:

Object.style.borderColor="color|transparent|inherit"

Return the borderColor property:

Object.style.borderColor

Value	Description
color	Specifies the color of the border. Look at CSS Color Values for a complete list of possible color values
transparent	The color of the border is transparent (underlying content will shine through). This is default
inherit	The color of the border is inherited from the parent element

Browser Support

The borderColor property is supported in all major browsers.

Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".

Example

Change the color of the four borders:

<html>
<head>
<style type="text/css">
#ex1
{
border: thick solid #FF0000;
}
</style>
<script>
function displayResult()
{
document.getElementById("ex1").style.borderColor="#00FF00 #0000FF";
}
</script>
</head>
<body>

<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="displayResult()">Change color of border</button>

</body>
</html>

Try it yourself »

Style Object