CSS3 border-top-right-radius property
Add a fillet border to the upper right corner of the div element:
{
border:2px solid;
border-top-right-radius:2em;
}
Try it out . . .
Browser support
The numbers in the table support the first browser version number of the property.
The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports the prefix property.
| Attributes | |||||
|---|---|---|---|---|---|
| border-radius | 9.0 |
5.0
4.0 -webkit- |
4.0
3.0 -moz- |
5.0
3.1 -webkit- |
10.5 |
Description of property definition and use
The border-top-right-radius property defines the border shape in the upper right corner.
Tip: This property allows you to add fillet borders to elements!
| Default: | 0 |
|---|---|
| Inherited: | no |
| Version: | CSS3 |
| JavaScript syntax: | object object.style.borderTopRightRadius="5px" |
Grammar
Note: The two length or percentage values of the border-top-right-radius property define the shape of the edge corner of the outer border of a quarter of the ellipse. T he first value is the horizontal radius and the second is the vertical radius. I f the second value is omitted, it is copied from the first. I f either length is zero, the corner is square and not round. The percentage of the horizontal radius refers to the width of the bounding box, while the percentage of the vertical radius refers to the height of the bounding box.
| value | describe |
|---|---|
| length | Define the shape of the upper right corner. |
| % | Use% to define the shape of the upper right corner. |
Related articles
CSS3 tutorial: CSS3 Borders