border-top-right-radius Description:
The border-top-right-radius property defines the radii of a quarter ellipse that defines the shape of the top right corner. This allows web designers to create rounded corners with a curve they specify.
border-top-right-radius in CSS Versions:
border-top-right-radius Syntax:
border-top-right-radius : <length> <length>?
The two length values are a precise unit of measurement that define the radii of the corner. If either length is 0 the corner is square, not rounded. If the second length is omitted, it is equal to the first creating a quarter circle.
border-top-right-radius Initial Value:
border-top-right-radius Applies to:
border-top-right-radius Inheritance:
border-top-right-radius Browser Support:
border-top-right-radius is supported as-is in Opera 10.
In order to get it to work in Firefox and Safari, you have to use two related properties:
- -moz-border-radius-topright - for Firefox 3+
- -webkit-border-top-right-radius - for Safari 2+
It should be supported by Internet Explorer 9.
border-top-right-radius Media Type:
border-top-right-radius Examples:
Create a standard rounded corner:
border-top-right-radius:1em;
-moz-border-radius-topright:1em;
-webkit-border-top-right-radius:1em;
To create a shallower curve:
border-top-right-radius:1.6em 1em;
-moz-border-radius-topright:1.6em 1em;
-webkit-border-top-right-radius:1.6em 1em;
border-top-right-radius Special Notes:
Don't forget to set the -moz and -webkit styles as well as the basic border-top-right-radius so that your curves show up in most modern browsers.
More Information on the border-top-right-radius CSS Property
- border-radius - shorthand property to set all four corners at once
- Rounded Corners Using CSS and No Images and works in IE
- CSS 3 Tabbed Menu using border-radius to curve the tab corners
More help with CSS 3
Return to the Style Library
