HTML | DOM Style borderBottomLeftRadius Property
The borderBottomLeftRadius property in HTML DOM is used to set or return the radius of the border of the bottom-left corner.
Syntax:
- It returns the borderBottomLeftRadius Property.
object.style.borderBottomLeftRadius
- It is used to set the borderBottomLeftRadius property.
object.style.borderBottomLeftRadius = "length|%|initial|inherit"
Parameter:
- Length: This will define the shape of the bottom-left corner bydefault value is 0.
- %: This is also do the same job but in percentage format.
- initial: This will set the property to it’s default value.
- inherit: This will inherit the property from it’s parent element.
Return Value: It returns the radius value of bottom left corner border.
Example 1:
html
<!DOCTYPE html><html><head> <style> div { border: 1px solid black; width: 300px; text-align:center; padding:30px; color: green; } </style></head><body> <div id = "main"> <h1>GeeksforGeeks!</h1> <button onclick="myGeeks()"> Click Here! </button> </div> <script> function myGeeks() { document.getElementById("main").style.borderBottomLeftRadius = "35px"; } </script></body></html> |
Output:
Before click on the button:
After click on the button:
Example 2:
html
<!DOCTYPE html><html><head> <style> div { border: 1px solid black; width: 300px; text-align:center; padding:30px; color: green; } </style></head><body> <div id = "main"> <h1>GeeksforGeeks!</h1> </div><br> <button onclick="myGeeks()"> Click Here! </button> <p id="val"></p> <script> function myGeeks() { document.getElementById("main").style.borderBottomLeftRadius = "35px"; var x = document.getElementById("main").style.borderBottomLeftRadius; document.getElementById("val").innerHTML = "Border Radius: " + x; } </script></body></html> |
Output:
Before click on the button:
After click on the button:
Supported Browsers: The browsers supported by borderBottomLeftRadius property are listed below:
- Google Chrome 4.0
- Edge 12.0
- Internet Explorer 9.0
- Firefox 4.0
- Opera 10.5
- Safari 5.0
Please Login to comment...