In this section, we will learn what the border-bottom-left-radius property is and how to use it in CSS.
Click here to run the example of border-bottom-left-radius property.
CSS border-bottom-left-radius Property Definition and Usage
When creating an element in HTML, by default it has 4 square corners. But this is the default behavior and with the help of CSS we can change the shape of corners.
For example, the border-bottom-left-radius property focuses on the bottom left corner of an element.
Basically, with this property we can change the radius of this corner and create a round shape instead of having a square corner.
CSS border-bottom-left-radius Property Syntax
border-bottom-left-radius: length|% [length|%]|initial|inherit;
CSS border-bottom-left-radius Property Value
This property takes two values by default:
- The first value defines the bottom border radius.
- The second value defines the left border radius.
- Any relative or absolute units that are supported in CSS can be used as the value of this property.
- If we only apply one value and omit the second one, browsers automatically copy the first value and use it for the second one as well.
- By default, both values are set to 0 and as a result, we will have a sharp corner for elements.
Example: border-bottom-left-radius property in CSS
See the Pen border-bottom-left-radius property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
How Does CSS border-bottom-left-radius Property Work?
In this example, the value for this property is set to 40px and 70px. This means the bottom border radius is set to 40px and left border radius to 70px.