1. Technology



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:

all elements, except table element when border-collapse is "collapse".

border-top-right-radius Inheritance:

Not inherited

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:


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

More help with CSS 3
Return to the Style Library

  1. About.com
  2. Technology
  3. Web Design / HTML
  4. CSS
  5. Style Properties
  6. border-top-right-radius - CSS Style Property - border-top-right-radius

©2014 About.com. All rights reserved.