The borderRightWidth property in HTML DOM is used to set or return the width of the right border of an element.
Syntax:
- It returns the borderRightWidth property.
object.style.borderRightWidth
- It is used to set the borderRightWidth property.
object.style.borderRightWidth = "thin|medium|thick|length| initial|inherit"
Property Values:
- thin: It is used to define a thin border.
- medium: It is used to define a medium border and it is default value.
- thick: It is used to define a thick border.
- length: The width of the border in length unit.
- initial: It is used to set to its default value.
- inherit: It is used to inherit from its parent element.
Example 1: This example uses style borderRightWidth property to set the width of right border to 20px.
html
<!DOCTYPE html><html>
<head>
<title>
Style borderRightWidth Property
</title>
</head>
<body style="text-align:center;">
<div id="GFG" style="border:solid green;">
<h1>GeeksForGeeks</h1>
<h2>
Style borderRightWidth Property
</h2>
<button type="button" onclick="myFunction()">
Click
</button>
<br><br>
</div>
<!-- Script to set border right width -->
<script>
function myFunction() {
document.getElementById("GFG").style.borderRightWidth
= "20px";
}
</script>
</body>
</html>
|
Output:
Before clicking on the button:
After clicking on the button:
Example 2: This example uses style borderRightWidth property to set the width of right border to ‘thin’.
html
<!DOCTYPE html><html>
<head>
<title>
Style borderRightWidth Property
</title>
</head>
<body style="text-align:center;">
<div id="GFG" style = "border:20px solid green">
<h1>
GeeksForGeeks
</h1>
<h2>
Style borderRightWidth Property
</h2>
<button type="button" onclick="myFunction()">
Click
</button>
<br><br>
</div>
<!-- Script to set border right width to thin -->
<script>
function myFunction() {
document.getElementById("GFG").style.borderRightWidth
= "thin";
}
</script>
</body>
</html>
|
Output:
Before clicking on the button:
After clicking on the button:
Supported Browser: The browser supported by DOM Style borderRightWidth Property are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 4
- Firefox 1
- Opera 3.5
- Safari 1