Is “border-radius” acceptable?

Question

I'm making a website, and would like to know if the CSS property "borderRadius" is 'acceptable'. Like, should it be expected that everyone has a browser supporting it, or is it still too unsupported that I shouldn't use it?

Answer 1

This is a good time to check http://caniuse.com for the specifics on which browsers support it, and which ones do not. Additionally, http://css3please.com will tell you the proper way to implement it for the broadest support.

From the first site, we see that the support isn't all that bad, though we will need to use some prefixes for some browsers. The second site gives us the following implementation:

.box_round {
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
          border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, 
                                  iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding; 
          background-clip: padding-box;      
}

Any browser that doesn't understand it will just ignore it, and move on to the next rule. With that, be sure not to use it in any way that your layout depends on it for usability. Use it as a progressive enhancement , and not a necessary feature.

Answer 2

In my experience, browsers that don't recognize border-radius just ignore it. Therefore, it's in your best interests to be forward-thinking and just use it. Older browsers just simply will show the default block corners instead of the rounded corners.

Don't let the lack of that feature in older browsers deter you from improving the user experience of those who have upgraded their browsers.