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.
<!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.
<!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