Add a fillet border to the lower-right corner of the div element:
div
{
border:2px solid;
border-bottom-right-radius:2em;
}
Run it
Browser support
| 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-right-radius properties.
Definitions and usages
The border-bottom-right-radius property defines the shape of the border in the lower right corner.
Tip: This property allows you to add fillet borders to elements.
| Default: | 0 |
|---|---|
| Inheritance: | no |
| Version: | CSS3 |
| JavaScript syntax: | object .style.borderBottomRightRadius="5px" |
Grammar
border-bottom-right-radius: length|% [length|%];
Note: The length and percentage values of the border-bottom-right-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 right corner. | Test |
| % | Defines the shape in the lower right corner as a percentage value. | Test |
Related pages
CSS3 tutorial: CSS3 border