HTML | DOM Style borderRight Property
The DOM style borderRight property is used to set or returns the three different border-right property 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 right border.
- style: This will set the style of right border.
- color: This will set the color of right border.
- initial: This will set the property to it’s default value.
- inherit: This will inherit the property from it’s parent element
Return Value: This property returns a string which represents the width, style, and color of the right border of an element.
Example 1:
<!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:
Before Click on the button:
After Click on the button:
Example 2:
<!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:
Before Click on the button:
After Click on the button:
Supported Browsers: The browser supported by DOM borderRight property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Apple Safari
.png)
