Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How can I use Modernizr to get border-radius working in IE8?

How can I use Modernizr to get border-radius working in IE8?

Problem

I know there has been numerous articles about obtaining Rounded Corners in IE8. My question is, how to use Modernizr to support CSS3/HTML5 features?

For example to show rounded corners in IE8, I am using CSS-3 property

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

I have included Modernizr in my page, but still not able to see rounded corners in IE8.

Problem courtesy of: Abhijeet

Solution

Modernizr does not enable features, it just tests if they are available. For CSS, it can also remove the need to use vendor specific properties such as -moz-* and -webkit-* allowing you to simply use the standard properties instead:

.myElement {
    -webkit-border-radius: 20px; /* No need for this */
    -moz-border-radius: 20px;    /* No need for this */
    border-radius: 20px;
}

For rounded corners in IE8, I wouldn't bother with Modernizr feature detection, simply use CSS PIE to enable them.

.myElement {
    border-radius: 8px;
    behavior: url(/PIE.htc); /* only IE will use this */
}

Make sure to read the docs on how to get this to work.

As a side note, standard border-radius has been supported for quite some time now by mozilla and webkit browsers, you might want to check to see if you are actually targeting any browsers that need those prefixes: http://caniuse.com/#search=border-radius (click "Show all versions")

Solution courtesy of: Wesley Murch

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How can I use Modernizr to get border-radius working in IE8?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×