border-radius
border-radius rounds the corners of a box. It shapes cards, buttons, media frames, and many modern surfaces without extra wrapper elements or images.
Overview
border-radius rounds the corners of a box. It shapes cards, buttons, media frames, and many modern surfaces without extra wrapper elements or images.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 4 | 12 | 4 | 5 | 18 | 4.2 | |
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 |
| Other | ||||||
| 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. | 4 | 12 | 4 | 5 | 18 | 4.2 |
| CSS property | ||||||
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 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 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)
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.
Related links
Powered by web-features