HTML DOM Style borderBottomRightRadius Property
The DOM borderBottomRightRadius property is used to select any element from the DOM tree and set the style of the radius of the bottom-right corner of its border.
Syntax :
- It returns the borderBottomRightRadius Property.
object.style.borderBottomRightRadius
- It is used to set the borderBottom property.
object.style.borderBottomRightRadius = "length|% [length|%]| initial|inherit"
Parameter:
- length: Define the shape of right-bottom corner.
- %: Do the same thongs in percentage format.
- initial: It will set the property to it’s default value.
- inherit: It inherits the property from it’s parent element
Return Value: This sets or return the radius value of the bottom right corner border.
Below examples illustrate the borderBottomRightRadius property:
Example 1: This will set the bottom-right-radius value to 25px.
html
<!DOCTYPE html><html><head> <title> HTML | DOM Style borderBottomRightRadius Property </title> <style> div { border: 1px solid green; width: 300px; padding: 40px; height: 100px; color: green; } </style></head><body> <div id="mainDiv"> <h1 onclick="myFunction()"> GeeksforGeeks.! </h1> </div> <script> function myFunction() { document.getElementById("mainDiv").style.borderBottomRightRadius = "25px"; } </script></body></html> |
Output: Before click inside the “div” element.
After click on the div element.
Example 2: This will set the bottom-right-radius value to 25px and then return the value that is set.
html
<!DOCTYPE html><html><head> <title> HTML | DOM Style borderBottomRightRadius Property </title> <style> div { border: 1px solid green; width: 300px; padding: 40px; height: 100px; color: green; } </style></head><body> <div id="mainDiv"> <h1>GeeksforGeeks.!</h1> </div> <br> <p id="val"> The value that set to the bottom right radius is : <span id="value">?</span> </p> <br> <input type="button" onclick="myFunction()" value="Click Me and check the radius value.!" /> <script> function myFunction() { document.getElementById("mainDiv").style.borderBottomRightRadius = "25px"; var x = document.getElementById("mainDiv").style.borderBottomRightRadius; document.getElementById("value").innerHTML = x; } </script></body></html> |
Output: Before click on the button.
After click on the button.
Supported Browser: The browser supported by HTML | DOM Style borderBottomRightRadius Property are listed below:
- Google Chrome 4.0 and above
- Edge 12.0 and above
- Internet Explorer 9.0 and above
- Firefox 4.0 and above
- Opera 10.5 and above
- Safari 5.0 and above
Please Login to comment...