HTML DOM Style borderRightColor Property


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

Following is the syntax for −

Setting the borderRightColor property −

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

The above properties are explained as follows −

ValueDescription
colorFor specifying the Right border color. Its default color is set to black
transparentThe makes the Right border color transparent and the underlying content can be seen.
initialFor setting this property to default value
inheritTo inherit the parent property value.

Let us look at an example for the borderRightColor property:

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   #IMG1 {
      border-right:solid 8px;
      border-right-color: orange;
   }
</style>
<script>
   function changeBorderRight(){
      document.getElementById("IMG1").style.borderRightColor="lightgreen";
      document.getElementById("Sample").innerHTML="The border Right color is now changed to green";
   }
</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 Right color by clicking the below button</p>
<button onclick="changeBorderRight()">Change Border Color</button>
<p id="Sample"></p>
</body>
</html>

Output

On clicking the “Change Border Color” button −

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 left style and the border left color.

#IMG1 {
   border-right:solid 8px;
   border-right-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 changeBorderRight() method on being clicked by the user −

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

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

function changeBorderRight(){
   document.getElementById("IMG1").style.borderLeftColor="lightgreen";
   document.getElementById("Sample").innerHTML="The border left color is now changed to green";
}

Updated on: 23-Oct-2019

43 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements