Do we need box-shadow or border-radius prefixes anymore?

Avatar of Chris Coyier
Chris Coyier on

Take the pain out of building site search with the Algolia hosted API. Start free now!

Straight forward question by Jay Hughes:

I didn’t specifically have a post about this, so let’s do it!

Short Answer

Specifically for box-shadow and border-radius, probably not.

You only need them if:

  1. It’s a rare situation where the square-corner or no-shadow fallback hurts the experience.
  2. And your site has significant traffic of Firefox 3.6-, Safari 4-, iOS 3.2-, or Android 2.3-

Long Answer

Let’s explore a bit deeper. First, you can see exactly what browsers support what features at Can I use….

Second, you should only make decisions about feature support based on statistics from your own site and nothing else.

border-radius

Firefox 3.6- needs -moz-. From 4 up, unprefixed is fine. On this site, that’s 0.3% of the 30% or so that use Firefox.

Safari 4- needs -webkit-. That’s even smaller for this site. 0.1% of the 10% or so using Safari.

iOS 3.x needs -webkit- too, which means an iPhone 3GS or iPad 1 that have never been upgraded, which is the smallest number yet.

Again, it’s your sites stats that matter, but I’d guess most sites are well under 1% for all this combined.

Not to mention, a non-rendering border-radius is the poster child for “who cares” fallbacks.

box-shadow

Box shadow is similar but slightly more strict. Exactly the same for Firefox and iOS. Safari needs -webkit- in 5.0-, but was fixed just three months later in 5.1 (which shipped with OS X 10.7).

The most significant difference is that Android 2.3 needs -webkit-. Can I Use listed it as needed on 4.0, but I sent in a correction and they fixed within hours, so that’s good to know! Even on this site, I’m looking at 0.5%, which is way higher than those other browsers. If you’re site is specifically mobile-y, I bet this number is much higher.

It’s likely that the fallback of not having box shadows is no big deal, but I have seen a situation where it mattered so hey.