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;
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:
<!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
>
chevron_rightfilter_none - Output:
(Percentage)%:It defines radius of bottom-left corner of border in percentage.
- Syntax:
border-bottom-left-radius: % [length|%];
- Examples:
<!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
>
chevron_rightfilter_none - 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:
<!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
>
chevron_rightfilter_none - 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
- Internet Explorer
- Firefox
- Opera
- Safari