Add a rounded border to the bottom-right corner of a div element:
document.getElementById("myDIV").style.borderBottomRightRadius = "25px";
Click the button to change the border-bottom-right-radius property of the DIV element:
<!DOCTYPE html> <html> <head> <style> #myDIV {/*from w w w .ja v a2 s . c o m*/ border: 1px solid black; width: 300px; height: 300px; } </style> </head> <body> <button onclick="myFunction()">Test</button> <div id="myDIV"> <h1>Hello</h1> </div> <script> function myFunction() { document.getElementById("myDIV").style.borderBottomRightRadius = "25px"; } </script> </body> </html>
The borderBottomRightRadius property sets or gets the shape of the border of the bottom-right corner.
This property allow you to add rounded borders to elements!
Property Values
Value | Description |
---|---|
length | Defines the shape of the bottom-right corner. Default value is 0 |
% | Defines the shape of the bottom-right corner in % |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |
The borderBottomRightRadius property returns a String representing the border-bottom-right-radius property of an element.