March 27, 2012

How to add CSS3 rounded corners with modernizr?

Question by Alok Jain

I am trying to add CSS3 based rounded corner support in IE7 and IE8 on following page

Test URL: http://jaspreetkaur.com/postjoint

I have included modernizr library, but it’s not working. Is there any code that i need add to make it working in IE?

Answer by Nix

As others have said, Modernizr won’t make legacy browsers able to support CSS3. It only checks for support, plus other neat features, such as HTML5shiv, so that you can use HTML5 markup.

To enable CSS3 features in older browsers, you might try CSS3 Pie, but I find it some times creates more problems than it solves. I usually just don’t let older browsers see all the fancy stuff, such as rounded corners. It’s just a minor design feature, not critical to the overall functionality or layout.

http://css3pie.com/

Answer by Starx

1. IE8, IE7 do not support CSS3 rounder corners.

2. Mordernizr, is only a script, that enable HTML5 features across different browsers

CSS3 tag for rounder corner is

-webkit-border-radius: 5px; /* for safari */
-moz-border-raidus: 5px; /* for firefox < 4 */
border-radius: 5px; /* for all other that support it */
...

Please fill the form - I will response as fast as I can!