CSS: border-bottom-left-radius property
This CSS tutorial explains how to use the CSS property called border-bottom-left-radius with syntax and examples.
Description
The CSS border-bottom-left-radius property defines rounded corners on the left side of the bottom border of a box.
Syntax
The syntax for the border-bottom-left-radius CSS property is:
border-bottom-left-radius: value;
Parameters or Arguments
- value
The radius value to apply to the left side of the bottom border of a box. It can be one of the following:
Value Description fixed Fixed value expressed in px, em, ...
div { border-bottom-left-radius: 4px; }percentage Percentage value
div { border-bottom-left-radius: 8%; }inherit Element will inherit the border-bottom-left-radius from its parent element
div { border-bottom-left-radius: inherit; }
Note
- See also the border-bottom-right-radius and border-radius properties.
Browser Compatibility
The CSS border-bottom-left-radius property has basic support with the following browsers:
- Chrome 4
- Firefox 4+ (Gecko 2+)
- Internet Explorer 9+ (IE 9+)
- Opera 10.5+
- Safari 5+ (WebKit 3+)
Example
We will discuss the border-bottom-left-radius property below, exploring examples of how to use this property in CSS.
Let's look at a CSS border-bottom-left-radius example where we provide a fixed value.
div { border-bottom-left-radius: 2px; border-bottom-style: solid; }
In this CSS border-bottom-left-radius example, we have defined rounded corners of 2px on the left side of the bottom border for the <div> tag. Be sure to apply a border-bottom-style so that the border appears.
Next, we'll look at a CSS border-bottom-left-radius example where we provide a percentage value.
div { border-bottom-left-radius: 5%; border-bottom-right-radius: 10%; border-bottom-style: solid; }
In this CSS border-bottom-left-radius example, we have defined rounded corners of 5% to the left side of the bottom border and 10% to the right side of the bottom border. As you can see, the corners of the bottom border can be completely different which can add a unique visual effect to your web page.
Advertisements