border-radius

Summary

The border-radius CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.

Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse

The radius applies to the whole background, even if the element has no border; the exact position of the clipping is defined by the background-clip property.

This property is a shorthand to set the four properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.

As with any shorthand property, individual inherited values are not possible, that is border-radius:0 0 inherit inherit, which would override existing definitions partially. In that case, the individual longhand properties have to be used.

  • Initial value the concatenation of the initial values of its longhand properties:
    • border-top-left-radius: 0
    • border-top-right-radius: 0
    • border-bottom-right-radius: 0
    • border-bottom-left-radius: 0
  • Applies to all elements; but UA are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined for the moment.
  • Inherited no
  • Percentages refer to the corresponding dimension of the border box
  • Media visual
  • Computed value as each of the properties of the shorthand:
    • border-bottom-left-radius: two absolute length or percentages
    • border-bottom-right-radius: two absolute length or percentages
    • border-top-left-radius: two absolute length or percentages
    • border-top-right-radius: two absolute length or percentages
  • Animatable as each of the properties of the shorthand:
    • border-top-left-radius: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
    • border-top-right-radius: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
    • border-bottom-right-radius: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
    • border-bottom-left-radius: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
  • Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
The syntax of the first radius allows one to four values:
border-radius: radius             
border-radius: top-left-and-bottom-right top-right-and-bottom-left 
border-radius: top-left top-right-and-bottom-left bottom-right 
border-radius: top-left top-right bottom-right bottom-left 

The syntax of the second radius also allows one to four values
border-radius: (first radius values) / radius             
border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left 
border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right 
border-radius: (first radius values) / top-left top-right bottom-right bottom-left 

border-radius: inherit

Values

radius all-corner.png Is a <length> or a <percentage> denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.
top-left-and-bottom-right top-left-bottom-right.png Is a <length> or a <percentage> denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax.
top-right-and-bottom-left top-right-bottom-left.png Is a <length> or a <percentage> denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes.
top-left top-left.png Is a <length> or a <percentage> denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes.
top-right top-right.png Is a <length> or a <percentage> denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax.
bottom-right bottom-rigth.png Is a <length> or a <percentage> denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes.
bottom-left bottom-left.png Is a <length> or a <percentage> denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax.
inherit   Is a keyword indicating that all four values are inherited from their parent's element calculated value.

Values

<length>
Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS <length> data types. Negative values are invalid.
<percentage>
Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

For example:

border-radius: 1em/5em;

/* is equivalent to */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;
border-radius: 4px 3px 6px / 2px 4px;

/* is equivalent to: */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

Examples

  border: solid 10px;
  /* the border will curve into a 'D' */  
  border-radius: 10px 40px 40px 10px;
  
  border: groove 1em red;  
  border-radius: 2em;
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em; 
  border: none;
  border-radius: 40px 10px;  
  border: none;
  border-radius: 50%; 

Live Samples

Sample 1 : http://jsfiddle.net/Tripad/qnGKj/2/

Sample 2 : http://jsfiddle.net/Tripad/qnGKj/3/

Sample 3 : http://jsfiddle.net/Tripad/qnGKj/4/

Sample 4 : http://jsfiddle.net/Tripad/qnGKj/5/

Sample 5 : http://jsfiddle.net/Tripad/qnGKj/6/

 

Notes

  • Dotted and dashed rounded border corners are rendered as solid in Gecko; see bug 382721.
  • border-radius does not apply to table elements when border-collapse is collapse.
  • Old versions of WebKit handle multiple values differently, see below.

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3 Candidate Recommendation  

Browser compatibility

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 4.0 (2.0)
1.0 (1.7 or earlier)-moz
4.0
0.2-webkit
9.0 10.5 5.0
3.0-webkit
Elliptical borders 3.5 (1.9.1) yes yes yes yes, but see below
4 values for 4 corners yes 4.0 yes yes 5.0
Percentages yes
was (see below)
yes yes 11.5 5.1
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Basic support 3.2-webkit Not supported Not supported 2.1-webkit
Elliptical borders ? Not supported Not supported ?
4 values for 4 corners ? Not supported Not supported ?
Percentages ? Not supported Not supported ?

<percentage> values

  • are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010)
  • are buggy in Opera prior to 11.50
  • are implemented in a non-standard way prior to Gecko 2.0 (Firefox 4). Both horizontal and vertical radii were relative to the width of the border box.
  • are not supported in older versions of iOS (prior to 5) and Android versions (prior to WebKit 532)

Gecko notes

In Gecko 2.0 -moz-border-radius was renamed to border-radius; -moz-border-radius was supported as an alias until Gecko 12.0. In order to conform to the CSS3 standard, Gecko 2.0

  • changes the handling of <percentage> values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with border-radius: 50%;
  • makes rounded corners clip content and images (if overflow: visible is not set)
Note: Support for the prefixed version (-moz-border-radius) was removed in Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10).

WebKit notes

Older Safari and Chrome versions (prior to WebKit 532.5)

  • support only one value for all 4 corners. For different radii the long form properties must be used
  • don't support the slash / notation. If two values are specified, an elliptical border is drawn on all 4 corners
    /* this is equivalent: */
    
    -webkit-border-radius: 40px 10px;
            border-radius: 40px/10px;
    

Opera notes

In Opera (prior to Opera 11.60), applying border-radius to replaced elements will not have rounded corners.

See also

Attachments

File Size Date Attached by
all-corner.png
666 bytes 2012-02-29 13:58:50 teoli
bottom-left.png
389 bytes 2012-02-29 13:58:51 teoli
bottom-rigth.png
475 bytes 2012-02-29 13:58:52 teoli
top-left-bottom-right.png
505 bytes 2012-02-29 13:58:52 teoli
top-left.png
377 bytes 2012-02-29 13:58:53 teoli
top-right-bottom-left.png
550 bytes 2012-02-29 13:58:54 teoli
top-right.png
433 bytes 2012-02-29 13:58:54 teoli
border-radius-sh.png
21401 bytes 2012-02-29 13:42:30 teoli
responsive-design-view-controls
65217 bytes 2013-09-20 14:27:09 wbamberg
zone header image
186565 bytes 2013-09-24 05:27:56 chrisdavidmills
temporary zone image
98356 bytes 2013-09-24 05:29:57 chrisdavidmills
Hide Sidebar