The border-bottom-left-radius property is used to define the radius of the bottom left corner of the border i.e. it makes the bottom-left of the border rounded.
Syntax:
border-bottom-left-radius: length|% [length|%]|initial|inherit;
Default Value: its default value is 0.
Property Value:
- Length: This property is used to specify the radius of the border in length(eg. px). Its default value is 0.
- Inherit: By using inherit property, it inherits the properties of the parent element and uses it for the current bottom-left-radius of the border.
- (Percentage)%: It defines the radius of the bottom-left corner of the border in percentage.
- Initial: Initial sets the default property of the bottom-left-radius i.e. 0 which results in a square border.
Note: If we set two values for radius then the first value is assigned to the bottom border and the second value is assigned to the left border.
Examples: In this example, we are using the border-bottom-left-radius: 20px 50px; property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-left-radius Property
</title>
<style>
#bdr {
border: 2px solid black;
padding: 10px;
color: #009900;
font-size: 40px;
border-bottom-left-radius: 25px;
}
</style>
</head>
<body>
<center>
<h2>border-bottom-left-radius: 25px:</h2>
<div id="bdr">
<p>GeeksforGeeks</p>
</div>
</center>
</body>
</html>
|
Output:
Examples: In this example, we are using the border-bottom-left-radius: % [length|%]; property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-left-radius Property
</title>
<style>
#bdr {
border: 2px solid black;
padding: 50px;
color: #009900;
font-size: 40px;
border-bottom-left-radius: 50%;
}
</style>
</head>
<body>
<center>
<h2>border-bottom-left-radius: 50%:</h2>
<div id="bdr">
<p>GeeksforGeeks</p>
</div>
</center>
</body>
</html>
|
Output:
Examples: In this example, we are using the border-bottom-left-radius: initial; property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-left-radius Property
</title>
<style>
#bdr {
border: 2px solid black;
padding: 50px;
color: #009900;
font-size: 40px;
border-bottom-left-radius: initial;
}
</style>
</head>
<body>
<center>
<h2>border-bottom-left-radius: initial</h2>
<div id="bdr">
<p>GeeksforGeeks</p>
</div>
</center>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by CSS border-bottom-left-radius Property are listed below:
- Google Chrome 4 and above
- Edge 12 and above
- Internet Explorer 9 and above
- Firefox 4 and above
- Opera 10.5 and above
- Safari 5 and above
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
13 Jun, 2023
Like Article
Save Article