Jump to: navigation, search


W3C Candidate Recommendation


The border-radius CSS property allows authors to round the corners of an element. The rounding can be different per-corner, and it could have different horizontal and vertical radii, to produce elliptical curves.

Overview table

Initial value 0
Applies to All elements, except the table element when border-collapse is collapse
Inherited No
Media visual
Computed value As specified by individual properties
Animatable Yes
CSS Object Model Property


  • border-radius: percentage
  • border-radius: length / length
  • border-radius: percentage / percentage
  • border-radius: length


Denotes the size of the circle radius or the horizontal and vertical radii, for elliptical curves. It can be expressed in any unit allowed in CSS <length> data types. em units are useful for controls that scale proportionally with the font-size. Viewport-relative units (vw, vh, vmin, vmax) can be useful for controls that scale with the viewport size. Negative values are invalid. You can specify a single length for all four corners, or two, three or four lengths to specify different lengths for different corners: see the syntax section for more details.
Denotes the size of the corner radius, in percentages of the box’s border-box dimensions. Specifically, percentages for the horizontal axis refer to the width of the border-box, percentages for the vertical axis refer to the height of the border-box. Negative values are invalid. You can specify a single percentage for all four corners, or two, three or four percentages to specify different percentages for different corners: see the syntax section for more details.
length / length
Specifying two sets of length values separated by a forward slash equates to specifying separate lengths for the X and Y radii of the corners, resulting in elliptical corners if the X and Y radii have different lengths. Each set can consist of one, two, three or four values.
percentage / percentage
Specifying two sets of percentage values separated by a forward slash equates to specifying separate percentages for the X and Y radii of the corners, resulting in elliptical corners if the X and Y radii have percentages resulting in different computed values (depending on the width and height of the element, different percentages might result in the same computed values; see the remarks section for more). Each set can consist of one, two, three or four values.


View live exampleOne value example


border-radius: 1em;

/* is equivalent to: */

border-top-left-radius: 1em;
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
border-bottom-left-radius: 1em;

View live exampleMulti value example


border-radius: 20px 1em 1vw / 0.5em 3em;

/*is equivalent to:*/

border-top-left-radius: 20px 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 1vw 0.5em;
border-bottom-left-radius: 1em 3em;

View live exampleCreate an ellipse, unless the


border-radius: 50%;

/* Will be a circle if the element’s width is equal to its height */

View live exampleShrinking curves to avoid overlapping


border-radius: 100% 150%;

/* equivalent to: */

border-radius: 40% 60%;

/* The values shrink proportionally, all multiplied by the same factor, until there is no overlap */


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.


border-radius can take between one and four values:

  • one value will be applied to all four corners
  • two values will be applied to top-left + bottom-right, and top-right + bottom-left, respectively
  • three values will be applied to top-left, top-right + bottom-left, and bottom-right, respectively
  • four values will be applied to the four corners separately, in the order of top-left, top-right, bottom-right, bottom-left



  • The border-radius property is a composite property that specifies up to four border-*-radius properties. If values are given before and after the slash, the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, the values set both radii equally. The four values for each radii are given in clockwise order, starting from the top left corner. If less than four values are provided, they are repeated until we get four values, similarly to other CSS properties, such as border-width.
  • It’s possible to end up with elliptical corners, even by specifying one radius. This occurs when you are using percentages, since they resolve to a different number for each axis (horizontally they are percentages of the border box width, vertically of the height). For a demonstration, refer to the ellipse example above (example #3)
  • Since border-radius rounds the border box of the element, the inner (padding box) corners will have smaller radii (specifically border-radius - border-width), or even no rounding, if the border is thicker than the border-radius value. Another consequence of this is that when there are different border widths on adjacent sides, the curves of the padding box will be elliptical.
  • Note that although in the border-radius shorthand, there is a slash (/) to separate horizontal from vertical radii, they are space separated in the longhands.

Related specifications

Specification Status Related Changes
CSS Backgrounds and Borders Module Level 3: Rounded Corners: Candidate Recommendation
CSS Backgrounds and Borders Module Level 4: Rounded Corners: Editor’s Draft Added border-corner-shape to let border-radius specify the size of a number of different corner shapes besides rounded corners.



Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 4.0
0.2 -webkit
4.0 (2.0)
1.0 (1.7 or earlier) -moz
3.0 -webkit

Percentages Supported (when?)

Elliptical borders Supported (when?)
3.5 (1.9.1)
Supported (when?) -moz
Supported (when?)
Supported (when?)

4 values for 4 corners 4.0
Supported (when?) -webkit
Supported (when?)
Supported (when?) -moz
Supported (when?)


Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support 2.2
2.1 -webkit
3.2 -webkit

Compatibility notes

Browser Version Note
Firefox < 3.6 Used to treat percentage values as percentages of the width, for both axes
Firefox < 3.6 Non-standard longhand names (-moz-border-radius-topleft etc)
WebKit < 532.5 Supports only one value in border-radius. For different radii, the longhands need to be used. don't support the slash / notation. If two values are specified, they are interpreted as horizontal and vertical radii for all four corners.
WebKit < 532.5 When the sum of two adjacent radii exceeds the length of the side they’re on, they are reduced to 0 instead of shrinking proportionally.
Opera < 11.6 border-radius has no effect in replaced elements (like images)
Opera < 11.6 Percentages are accepted in border-radius, but are treated incorrectly.

See also

Related articles


  • border-radius

Related pages (MSDN)

This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg: [Border-radius Article]

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]