border-radius

Jump to: navigation, search

border-radius

This article is Ready to Use.


W3C Candidate Recommendation

Summary

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 borderRadius

Syntax

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


Values

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

Compatibility

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
4.0
Yes
0.2
prefix
?
Unknown
1.0
prefix
9.0
Yes
10.5
Yes
5.0
Yes
3.0
prefix
Elliptical borders
?
Yes
?
Unknown
?
Yes
?
Yes
?
Partial support (almost)
4 values for 4 corners
4.0
Yes
?
Yes
?
Yes
?
Yes
5.0
Yes
Percentages
?
Yes
?
Unknown
?
Yes
11.5
Yes
5.1
Yes

Mobile

FeaturesAndroid BrowserOpera MiniOpera MobileiOS Safari
Basic support
2.1
prefix
?
none
?
none
3.2
prefix
Elliptical borders
?
Unknown
?
none
?
none
?
Unknown
4 values for 4 corners
?
Unknown
?
none
?
none
?
Unknown
Percentages
?
Unknown
?
none
?
none
?
Unknown


Examples

View live exampleOne value example

CSS

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

CSS

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

CSS

border-radius: 50%;

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

View live exampleShrinking curves to avoid overlapping

CSS

border-radius: 100% 150%;

/* is equivalent to: */

border-radius: 40% 60%;

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

Usage

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.

Syntax

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

Notes

Remarks

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

Compatibility

No compatibility data found for feature ""


See also

Related articles

Border



















  • border-radius














Related pages (MSDN)

Attribution

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]