HTML DOM Style borderBottomLeftRadius Property
Last Updated :
15 Jun, 2023
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 >GeeksforGeeks!</ h1 >
< button onclick = "myGeeks()" >
Click Here!
</ button >
</ div >
< script >
function myGeeks() {
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 >GeeksforGeeks!</ h1 >
</ div >< br >
< button onclick = "myGeeks()" >
Click Here!
</ button >
< p id = "val" ></ p >
< script >
function myGeeks() {
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...