May 05, 2021 CSS Reference Manual
Add a fillet border to the lower-left corner of the div element:
div
{
border:2px solid;
border-bottom-left-radius:2em;
}
Attributes | |||||
---|---|---|---|---|---|
border-radius | 9.0 |
5.0
4.0 -webkit- |
4.0
3.0 -moz- |
5.0
3.1 -webkit- |
10.5 |
IE9 plus, Firefox 4 plus, Chrome, Safari 5 plus, and Opera support border-bottom-left-radius properties.
The border-bottom-left-radius property defines the shape of the border in the lower left corner.
Tip: This property allows you to add fillet borders to elements.
Default: | 0 |
---|---|
Inheritance: | no |
Version: | CSS3 |
JavaScript syntax: | object .style.borderBottomLeftRadius="5px" |
border-bottom-left-radius: length|% [length|%];
Note: The length and percentage values of the border-bottom-left-radius property define the radius (radii) of a quarter ellipse that defines the corner shape at the edge of the outer border. T he first value is the horizontal radius, and the second value is the vertical radius. I f the second value is omitted, the first value is copied. I f the length is zero, the corners are square, not round. The percentage value of the horizontal radius refers to the width of the border box, while the percentage value of the vertical radius refers to the height of the border box.
Value | Describe | Test |
---|---|---|
length | Define the shape in the lower left corner. | Test |
% | Defines the shape in the lower left corner as a percentage value. | Test |
CSS3 tutorial: CSS3 border