The DOM style borderRight property is used to set or return the three different border-right properties such as border-right-width, border-right-style, and border-right-color of an element.
Syntax:
- It returns the borderRight Property.
object.style.borderRight
- It is used to set the borderRight property.
object.style.borderRight = "width style color|initial|inherit"
Property value:
- width: This will set the width of the right border.
- style: This will set the style of the right border.
- color: This will set the color of the right border.
- initial: This will set the property to its default value.
- inherit: This will inherit the property from its parent element
Return Value: This property returns a string that represents the width, style, and color of the right border of an element.
Example 1: In this example, we will see the use of DOM Style borderRight Property.
html
<!DOCTYPE html><html>
<head>
<title>DOM Style borderRight Property </title>
</head>
<body>
<center>
<h1 style="color:green;width:50%;" id="sudo">
GeeksForGeeks
</h1>
<h2>DOM Style borderRight Property </h2>
<br>
<button type="button" onclick="geeks()">
Submit
</button>
<script>
function geeks() {
document.getElementById("sudo").style.borderRight
= "thick solid green";
}
</script>
</center>
</body>
</html>
|
Output:
Example 2: In this example, we will see the use of DOM Style borderRight Property.
HTML
<!DOCTYPE html><html>
<head>
<title>DOM Style borderRight Property</title>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Style borderRight Property </h2>
<h3 style="border:2px solid red;width:50%;" id="sudo">
geksforgeeks
</h3>
<br>
<button type="button" onclick="geeks()">
Submit
</button>
<script>
function geeks() {
document.getElementById("sudo").style.borderRight
= "thick dotted green";
}
</script>
</center>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by DOM borderRight property are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 5.5
- Firefox 1
- Opera 9.2
- Apple Safari 1