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.

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 .

• Initial value : 0
• Applies to: all elements, except the <table> element when border-collapse is collapse
• Inherited :no
• <percentage> :yes, refer to the corresponding size of the border box
• Media: visual
• Computed value : as specified by individual properties
• Animatable: as specified by individual properties

Syntax

Formal grammar: [ <length> | <percentage> ]{1,4}  [ / [ <length> | <percentage> ]{1,4}] ? 
                \------------------------------/      \-------------------------------/
                           First radii                     Second radii (optional)

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

where:

radius		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		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		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		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		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		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		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.

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 30px 30px 10px;

 border: groove 1em red;
 border-radius: 2em;

  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;

   background: gold;
   border-radius: 40px 10px; 

background: black;
color: gray;
border-radius: 50%;

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

Browser compatibility

See also

• Border-radius-related CSS properties: border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius