The borderRightColor property allows us to set/get the color to the right border of an element.
Syntax:
- It is used to return the borderRightColor property.
object.style.borderRightColor
- It is used to set the borderRightColor property.
object.style.borderRightColor = "color|transparent|initial|inherit"
Return Value: The borderRightColor property returns the color of the right border of an element.
Property Values:
- color: It specifies the right border color of the corresponding element. Black is the default color.
- transparent: It sets the right border color of the corresponding element to transparent.
Example 1: In this example, we will see the use of DOM style borderRightColor property
HTML
<!DOCTYPE html><html>
<head>
<style>
#GFG_Div {
width: 200px;
margin-left: 210px;
border: thick solid green;
}
</style>
</head>
<body>
<p> Click to change the right border color of element.</p>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<br>
<br>
<div id="GFG_Div">GeeksforGeeks</div>
<script>
function myGeeks() {
document.getElementById("GFG_Div")
.style.borderRightColor = "red";
}
</script>
</body>
</html>
|
Output:
Example 2: In this example, we will see the use of DOM style borderRightColor property
HTML
<!DOCTYPE html><html>
<head>
<style>
#GFG_Div {
width: 200px;
border: thick solid green;
}
</style>
</head>
<body>
<p> Click to change the right border color of element.</p>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<br>
<br>
<div id="GFG_Div">GeeksforGeeks</div>
<script>
function myGeeks() {
document.getElementById("GFG_Div")
.style.borderRightColor = "yellow";
}
</script>
</body>
</html>
|
Output:
Example: In this example, we will use the transparent property.
HTML
<!DOCTYPE html><html>
<head>
<style>
#GFG_Div {
width: 200px;
border: thick solid green;
}
</style>
</head>
<body>
<p> Click to change the right border color of element.</p>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<br>
<br>
<div id="GFG_Div">GeeksforGeeks</div>
<script>
function myGeeks() {
document.getElementById("GFG_Div")
.style.borderRightColor = "transparent";
}
</script>
</body>
</html>
|
Output:
- initial: When no value is specified for this field, it is inherited from the parent of the element. If there is no parent means this element is root then it takes the initial(or default) value.
- inherit: This keyword applies the initial(or default) value of a property to an element. The initial value should not be confused with the value specified by the browser’s style sheet. When borderColor sets to initial, It appears as black(default) color.
Browser Support: The browser supported by DOM Style borderRightColor property is listed below:
- Google Chrome: Supported
- Internet Explorer: Supported
- Mozilla Firefox: Supported
- Safari: Supported
- Opera: Supported