border-radius
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 4 | 12 | 4 | 5 | 18 | 4.2 | |
| Other | ||||||
| The border-bottom-left-radius CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. | 4 | 12 | 4 | 5 | 18 | 4.2 |
| CSS property | ||||||
elliptical corners Elliptical corners | 1 | 12 | 3.5 | 3 | 18 | 1 |
percentages Percentages | 4 | 12 | 4 | 5 | 18 | 4.2 |
| Other | ||||||
| The border-bottom-right-radius CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. | 4 | 12 | 4 | 5 | 18 | 4.2 |
| CSS property | ||||||
elliptical corners Elliptical corners | 1 | 12 | 3.5 | 3 | 18 | 1 |
percentages Percentages | 4 | 12 | 4 | 5 | 18 | 4.2 |
4 values for 4 corners 4 values for 4 corners | 4 | 12 | 4 | 5 | 18 | 4.2 |
elliptical borders Elliptical borders | 1 | 12 | 4 | 3 | 18 | 4.2 |
percentages Percentages | 8 | 12 | 4 | 5.1 | 18 | 5 |
| Other | ||||||
| The border-top-left-radius CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. | 4 | 12 | 4 | 5 | 18 | 4.2 |
| CSS property | ||||||
elliptical corners Elliptical corners | 1 | 12 | 3.5 | 3 | 18 | 1 |
percentages Percentages | 4 | 12 | 4 | 5 | 18 | 4.2 |
| Other | ||||||
| The border-top-right-radius CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. | 4 | 12 | 4 | 5 | 18 | 4.2 |
| CSS property | ||||||
elliptical corners Elliptical corners | 1 | 12 | 3.5 | 3 | 18 | 1 |
percentages Percentages | 4 | 12 | 4 | 5 | 18 | 4.2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Implementation note
- Chrome ignores `border-radius` on `<select>` elements unless `-webkit-appearance` is overridden to an appropriate value.
Compatibility
- Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (12)
Notes 4 item(s)
Implementation note
- Before Firefox 50, border styles of rounded corners (with `border-radius`) were always rendered as if `border-style` was `solid`. This has been fixed in Firefox 50.
- To conform to the CSS3 standard, Firefox 4 changes the handling of `<percentage>` values to match the specification. You can specify an ellipse as a border on an arbitrary sized element with `border-radius: 50%;`. Firefox 4 also makes rounded corners clip content and images if `overflow``: visible` is not set.
Removed
- This feature was removed in a later browser version (12)
Compatibility
- Available with a vendor prefix: -moz- (1)
Notes 2 item(s)
Implementation note
- Safari ignores `border-radius` on `<select>` elements unless `-webkit-appearance` is overridden to an appropriate value.
Compatibility
- Available with a vendor prefix: -webkit- (3)
Notes 2 item(s)
Implementation note
- Safari ignores `border-radius` on `<select>` elements unless `-webkit-appearance` is overridden to an appropriate value.
Compatibility
- Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (12)
Notes 4 item(s)
Implementation note
- Before Firefox 50, border styles of rounded corners were always rendered as if `border-style` was solid. This has been fixed in Firefox 50.
- Previously available under a different name: -moz-border-radius-bottomleft (1)
Compatibility
- Available with a vendor prefix: -webkit- (49)
Removed
- This feature was removed in a later browser version (12)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (3)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (1)
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (4)
Implementation note
- Before Firefox 4, the `<percentage>` was relative to the width of the box even when specifying the radius for a height. This implied that `-moz-border-radius-bottomright` was always drawing an arc of circle, and never an ellipse, when followed by a single value.
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (12)
Notes 4 item(s)
Implementation note
- Before Firefox 50, border styles of rounded corners were always rendered as if `border-style` was solid. This has been fixed in Firefox 50.
- Previously available under a different name: -moz-border-radius-bottomright (1)
Compatibility
- Available with a vendor prefix: -webkit- (49)
Removed
- This feature was removed in a later browser version (12)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (3)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (1)
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (4)
Implementation note
- Before Firefox 4, the `<percentage>` was relative to the width of the box even when specifying the radius for a height. This implied that `-moz-border-radius-bottomright` was always drawing an arc of circle, and never an ellipse, when followed by a single value.
Notes 1 item(s)
Implementation note
- Before Chrome 4, the slash `/` notation is unsupported. If two values are specified, then an elliptical border is drawn on all four corners. `-webkit-border-radius: 40px 10px;` is equivalent to `border-radius: 40px / 10px;`.
Notes 1 item(s)
Implementation note
- Before Safari 5, the slash `/` notation is unsupported. If two values are specified, then an elliptical border is drawn on all four corners. `-webkit-border-radius: 40px 10px;` is equivalent to `border-radius: 40px / 10px;`.
Notes 1 item(s)
Implementation note
- Before Firefox 4, `<percentage>` values are implemented in a non-standard way. Both horizontal and vertical radii were relative to the width of the border box.
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (12)
Notes 4 item(s)
Implementation note
- Before Firefox 50, border styles of rounded corners were always rendered as if `border-style` was solid. This has been fixed in Firefox 50.
- Previously available under a different name: -moz-border-radius-topleft (1)
Compatibility
- Available with a vendor prefix: -webkit- (49)
Removed
- This feature was removed in a later browser version (12)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (3)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (1)
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (4)
Implementation note
- Before Firefox 4, the `<percentage>` was relative to the width of the box even when specifying the radius for a height. This implied that `-moz-border-radius-bottomright` was always drawing an arc of circle, and never an ellipse, when followed by a single value.
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (12)
Notes 4 item(s)
Implementation note
- Before Firefox 50, border styles of rounded corners were always rendered as if `border-style` was solid. This has been fixed in Firefox 50.
- Previously available under a different name: -moz-border-radius-topright (1)
Compatibility
- Available with a vendor prefix: -webkit- (49)
Removed
- This feature was removed in a later browser version (12)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (3)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (1)
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (4)
Implementation note
- Before Firefox 4, the `<percentage>` was relative to the width of the box even when specifying the radius for a height. This implied that `-moz-border-radius-bottomright` was always drawing an arc of circle, and never an ellipse, when followed by a single value.
Syntax
CSS
/* Uniform rounded corners */
.card {
border-radius: 8px;
}
/* Perfect circle */
.avatar {
border-radius: 50%;
}
/* Custom values */
.tab {
border-radius: 8px 8px 0 0;
}
/* Elliptical rounded corners */
.pill {
border-radius: 9999px;
}Live demo
Use cases
-
Card and panel surfaces
Give containers softer corners to separate content groups visually.
-
Buttons and chips
Shape interactive controls so their visual affordance matches the design system.
Cautions
- Very large radii can crop children or create awkward artifacts if overflow handling is not considered.
- Corner styling should stay consistent across related components to avoid a visually fragmented UI.
Accessibility
- Rounded corners can improve visual grouping, but they should never be the only cue distinguishing interactive from non-interactive content.