border-radius

Read More at MDN DocsView Spec

Safe to Use

border-radius is considered safe to use.

It’s supported by 94% of global browsers.

Browsers

ChromeJan 25, 2010v4.0.0
26%╱100%
100% of Chrome users are running a supported version.
SafariJun 7, 2010v5.0.0
5%╱100%
100% of Safari users are running a supported version.
EdgeJul 28, 2015v12.0.0
5%╱100%
100% of Edge users are running a supported version.
FirefoxMar 22, 2011v4.0.0
3%╱100%
100% of Firefox users are running a supported version.

Version Breakdown

 
Agent
Support
Adoption
Chrome
Jan 25, 2010 v4.0.0
26%╱100%
100% of Chrome users are running a supported version.
Jan 25, 2010 – Latest
v4.0.0+
26%╱100%

Full Support

Chrome ignores border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.

Dec 11, 2008 – Latest
v1.0.0+
26%╱100%

Implemented with the vendor prefix: -webkit-

Chrome Android
Jun 27, 2012 v18.0.0
36%╱100%
100% of Chrome Android users are running a supported version.
Jun 27, 2012 – Latest
v18.0.0+
36%╱100%

Full Support

Edge
Jul 28, 2015 v12.0.0
5%╱100%
100% of Edge users are running a supported version.
Jul 28, 2015 – Latest
v12.0.0+
5%╱100%

Full Support

Jul 28, 2015 – Latest
v12.0.0+
5%╱100%

Implemented with the vendor prefix: -webkit-

Firefox
Mar 22, 2011 v4.0.0
3%╱100%
100% of Firefox users are running a supported version.
Mar 22, 2011 – Latest
v4.0.0+
3%╱100%

Full Support

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.

Nov 9, 2004 – Apr 24, 2012
v1.0.0 – v12.0.0

Implemented with the vendor prefix: -moz-

Firefox for Android
Mar 29, 2011 v4.0.0
Firefox for Android supports this feature.
Mar 29, 2011 – Latest
v4.0.0+

Full Support

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.

Mar 29, 2011 – Jun 26, 2012
v4.0.0 – v14.0.0

Implemented with the vendor prefix: -moz-

Internet Explorer
Mar 14, 2011 v9.0.0
0%╱94%
There are no users of Internet Explorer running a supported version.
Mar 14, 2011 – Latest
v9.0.0+
0%╱94%

Full Support

 
Quest Browser
Unknown v5.0.0
Quest Browser supports this feature.
Unknown
v5.0.0+

Full Support

Opera
Mar 2, 2010 v10.5.0
1%╱100%
100% of Opera users are running a supported version.
Mar 2, 2010 – Latest
v10.5.0+
1%╱100%

Full Support

Before Opera 11.60, replaced elements with border-radius do not have rounded corners.

Opera Android
Mar 22, 2011 v11.0.0
Opera Android supports this feature.
Mar 22, 2011 – Latest
v11.0.0+

Full Support

Safari
Jun 7, 2010 v5.0.0
5%╱100%
100% of Safari users are running a supported version.
Jun 7, 2010 – Latest
v5.0.0+
5%╱100%

Full Support

Safari ignores border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.

Oct 26, 2007 – Latest
v3.0.0+
5%╱100%

Implemented with the vendor prefix: -webkit-

Safari on iOS
Nov 22, 2010 v4.2.0
17%╱100%
100% of Safari on iOS users are running a supported version.
Nov 22, 2010 – Latest
v4.2.0+
17%╱100%

Full Support

Safari ignores border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.

Jun 29, 2007 – Latest
v1.0.0+
17%╱100%

Implemented with the vendor prefix: -webkit-

Samsung Internet
Apr 27, 2013 v1.0.0
2%╱100%
100% of Samsung Internet users are running a supported version.
Apr 27, 2013 – Latest
v1.0.0+
2%╱100%

Full Support

WebView Android
Sep 3, 2014 v37.0.0
WebView Android supports this feature.
Sep 3, 2014 – Latest
v37.0.0+

Full Support

Oct 26, 2009 – Latest
v2.0.0+

Implemented with the vendor prefix: -webkit-

See Also

Contribute