Javascript Reference - HTML DOM Style borderColor Property








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

This property can take from one to four values:

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




Browser Support

borderColor Yes Yes Yes Yes Yes

Syntax

Return the borderColor property:

var v = object.style.borderColor

Set the borderColor property:

object.style.borderColor=color|transparent|initial|inherit

Property Values

Value Description
color Set the border color. Default color is black
transparent Set border color to transparent. Default value
initial Set to default value
inherit Inherit from parent element.




Technical Details

Default Value: black
Return Value: A string representing the border-color property
CSS Version CSS1

Example

The following code shows how to use .Change the color of the four borders of a <div> element to red:


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--  w  w w.j  a  v  a 2  s.com-->
    border: thick solid blue;
}
</style>
</head>
<body>

<div id="myDiv">This is a div.</div>
<br>
<button type="button" onclick="myFunction()">Change color of the four borders</button>

<script>
function myFunction() {
    document.getElementById("myDiv").style.borderColor = "red";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to use .Change the color of the top and bottom border to green, and left and right border to purple, of a <div> element:


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from   w ww  .  j  a v a 2  s. c o m-->
    border: thick solid blue;
}
</style>
</head>
<body>

<div id="myDiv">This is a div.</div>
<br>
<button type="button" onclick="myFunction()">Change color of the four borders</button>

<script>
function myFunction() {
    document.getElementById("myDiv").style.borderColor = "green purple";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to use .Return the border color of a <div> element:


<!DOCTYPE html>
<html>
<body>
<!--  w w w  . j  ava 2 s.c om-->
<div id="myDiv" style="border:thick solid green">This is a div.</div>
<br>
<button type="button" onclick="myFunction()">Return border color</button>

<script>
function myFunction() {
    alert(document.getElementById("myDiv").style.borderColor);
}
</script>

</body>
</html>

The code above is rendered as follows: