CSS border-bottom-left-radius Property
The border-bottom-left-radius property is used to define the radius of the bottom left corner of the border i.e. it makes 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 border in length(eg. px).Its default value is 0.
Note: If we set two values for radius then the first value is assigned for the bottom border and the second value is assigned for the left border.
- Syntax:
border-bottom-left-radius: 20px 50px;
- Examples:
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:
(Percentage)%:It defines radius of bottom-left corner of border in percentage.
- Syntax:
border-bottom-left-radius: % [length|%];
- Examples:
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:
Initial: Initial sets the default property of the bottom-left-radius i.e. 0 which results in square border.
- Syntax:
border-bottom-left-radius: initial;
- Examples:
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:
Inherit: By using inherit property, it inherit the properties of parent element and use it for the current bottom-left-radius of border.
- Syntax:
border-bottom-left-radius: inherit;
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
.png)
