Javascript Reference - HTML DOM Style borderTopColor Property

The borderTopColor property sets or gets the color of the top border of an element.

Browser Support


`borderTopColor`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the borderTopColor property:

var v = object.style.borderTopColor

Set the borderTopColor property:

object.style.borderTopColor='color|transparent|initial|inherit'

Property Values

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

Technical Details

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

Example

The following code shows how to change the top border color.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!-- ww w.ja v a2 s  .c om-->
    border: thick solid blue;
}
</style>
</head>
<body>
<div id="myDiv">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myDiv").style.borderTopColor = "red";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the top border color.


<!DOCTYPE html>
<html>
<body>
<!--from   ww w . j  a va 2s .com-->
<div id="myDiv" style="border-top:thick solid green">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.borderTopColor);
}
</script>

</body>
</html>

The code above is rendered as follows: