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 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 >w3wiki</ 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 >w3wiki</ 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 >w3wiki</ 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
Contact Us