Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Should I still use vendor prefixes for border-radius?

Currently, when I code I use:

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

But based on my tests, it didn't make any difference with any modern browser ( Chrome 33+, opera 25+, safari 8+). Internet Explorer 8 doesn't supports this property, but the vendor prefixes won't make any difference.

Is there any reason to keep them?

like image 512
Nazareno Lorenzo Avatar asked Nov 19 '14 08:11

Nazareno Lorenzo


People also ask

Are vendor prefixes still needed?

Yes, and there will always be, as it's kind of an industry standard that vendors use their prefix on newly drafted properties/methods until those become a standard.

Which is correct use of 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.

What are vendor prefixes?

CSS Vendor prefixes (or browser prefixes) are a way for browsers to give access to new CSS features not yet considered stable. By using prefixes, we can use these newer CSS features with the browsers that support them — instead of waiting for all browsers to catch up.

Does Box Shadow need prefixes?

Short Answer. Specifically for box-shadow and border-radius , probably not. You only need them if: It's a rare situation where the square-corner or no-shadow fallback hurts the experience.


2 Answers

Use http://caniuse.com/#search=border-radius for checking such

Conclusion: No need for adding vendor prefixes for border-radius, as its supported in all major browsers (and IE9+). If you really need border-radius in IE8 check out: How to apply border radius in IE8 and below IE8 browsers?

But in 99% of cases border-radius is not crucial to a design. Employ the technique of graceful degradation and leave IE8 with square corners

like image 178
janhartmann Avatar answered Sep 21 '22 18:09

janhartmann


You can also add PrefixFree to your page to cover you in a few more cases than just border-radius, as it will add these prefixes for you to be safer.

And for backwards compatibility using CSS3 with older versions of IE there is PIE (again not just for border-radius but others) and you can just add this where you need it:

behavior:url('pie.htc');

like image 23
majick Avatar answered Sep 21 '22 18:09

majick