Easy Tutorial
❮ Prop Month Required Prop Style Captionside ❯

Style borderColor Property


Definition and Usage

The borderColor property sets or returns the color of an element's border.

This property can use from 1 to 4 colors:

Syntax

Set the borderColor property:

Return the borderColor property:

Value Description
color Specifies the color of the border. In CSS Color Values
transparent Default. The border color is transparent (the underlying content will show through).
inherit The border color is inherited from the parent element.

Browser Support

All major browsers support the borderColor property.

Note: IE7 and earlier versions do not support the "inherit" value. IE8 only supports "inherit" if !DOCTYPE is specified. IE9 supports "inherit".


Example

Change the color of all four borders:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
<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 the color of all four borders</button>

</body>
</html>

❮ Prop Month Required Prop Style Captionside ❯