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 default value is 0.
- %: This also does the same job but in a percentage format.
- initial: This will set the property to its default value.
- inherit: This will inherit the property from its parent element.
Return Value: It returns the radius value of the bottom left corner border.
Example 1: In this example, we will use the borderBottomLeftRadius property.
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 >w3wiki!</ h1 > < button onclick = "myBeginner()" > Click Here! </ button > </ div > < script > function myBeginner() { document.getElementById("main") .style.borderBottomLeftRadius = "35px"; } </ script > </ body > </ html > |
Output:
Example 2: In this example, we will use the borderBottomLeftRadius property.
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 >w3wiki!</ h1 > </ div >< br > < button onclick = "myBeginner()" > Click Here! </ button > < p id = "val" ></ p > < script > function myBeginner() { document.getElementById("main") .style.borderBottomLeftRadius = "35px"; let x = document.getElementById("main") .style.borderBottomLeftRadius; document.getElementById("val").innerHTML = "Border Radius: " + x; } </ script > </ body > </ html > |
Output:
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