The borderBottomRightRadius property is used for adding the rounded corners to the element’s bottom right border or get their measurement.
Syntax
Following is the syntax for −
Getting the borderBottomRightRadius property −
object.style.borderBottomRightRadius = "length|% [length|%]|initial|inherit"
The property values are explained as follows −
Values
Sr.No | Values & Description |
---|---|
1 | length For defining the bottom right corner shape |
2 | % For defining the bottom right corner shape in percentage. |
3 | initial For setting this property to initial value. |
4 | inherit To inherit the parent property value |
Example
Let us look at an example for the borderBottomRightRadius property −
<!DOCTYPE html> <html> <head> <style> #DIV1{ height: 100px; width: 200px; border: 10px groove orange; padding: 10px; border-bottom-right-radius: 240px 90px; } </style> <script> function changeBottomBorder(){ document.getElementById("DIV1").style.borderBottomRightRadius="90px 50px"; document.getElementById("Sample").innerHTML="The bottom border right radius is now decreased"; } </script> </head> <body> <div id="DIV1">SOME SAMPLE TEXT</div> <p>Change the above image bottom right border size by clicking the below button</p> <button onclick="changeBottomBorder()">Change Bottom Border</button> <p id="Sample"></p> </body> </html>
Output
This will produce the following output −
On clicking the “Change Bottom Border” button −