HTML DOM Style borderTopColor Property

The HTML DOM borderTopColor property is used to get or set the color for top border of an element.

Following is the syntax for −

Setting the borderTopColor property −

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

The above properties are explained as follows −

Value	Description
color	For specifying the Top border color. Its default color is set to black.
transparent	The makes the Top border color transparent and the underlying content can be seen.
initial	For setting this property to default value.
inherit	To inherit the parent property value.

Let us look at an example for the borderTopColor property −

Example

<!DOCTYPE html>
<html>
<head>
<style>
   #IMG1 {
      border-top:solid 8px;
      border-top-color: orange;
   }
</style>
<script>
   function changeBorderTop(){
      document.getElementById("IMG1").style.borderTopColor="blue";
      document.getElementById("Sample").innerHTML="The border top color is now changed to blue";
   }
</script>
</head>
<body>
   <img id="IMG1" src="https://www.tutorialspoint.com/blue_prism/images/blueprism-logo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=550&w=150">
   <p>Change the above image border top color by clicking the below button</p>
   <button onclick="changeBorderTop()">Change Border Color</button>
   <p id="Sample"></p>
</body>
</html>

Output

HTML DOM Style borderTopColor Property

On clicking the “Change Border Color” button −

HTML DOM Style borderTopColor Property

In the above example −

We have created an image element with id “IMG1” that has a css style applied to it. The css style specify the border top style and the border top color.

#IMG1 {
   border-top:solid 8px;
   border-top-color: orange;
}
<img id="IMG1" src="https://www.tutorialspoint.com/blue_prism/images/blueprism-logo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=550&w=150
">

We then created a button named “Change Border Color” that will execute changeBorderTop() method on being clicked by the user −

<button onclick="changeBorderTop()">Change Border Color</button>

The changeBorderTop() method gets the <img> element with id “IMG1” by using the getElementById() method and sets its borderTopColor style property to blue. This changes the top border color to blue and displays this change in the paragraph with id “Sample” using its innerHTML property −

function changeBorderTop(){
   document.getElementById("IMG1").style.borderTopColor="blue";
   document.getElementById("Sample").innerHTML="The border top color is now changed to blue";
}