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

Question

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.

Answer 1

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")