Question

I have applied border-radius on a div and the result is very poor rendering in IE9.
I know that I am probably asking for too much, but still this is something that should not happen at all.

It is very dificult to explain to a client what sub-pixel anti-aliasing is.

This is my CSS:

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

Answer 1

I believe I know what the problem is. It looks like you’re using a background image in the element with the rounded corners. IE doesn’t like that. If that is indeed what is causing your issue then you can solve it by adding a second element.

the parent element needs to have the rounded edges and overflow hidden. The child elements gets the background image.

I’ve only been able to test this in IE10 on the windows 8 release preview (which has the same problem) but I’m fairly certain it’s the same in IE9.

Example code:

.wrap {
    margin: 100px auto;
    width: 80%;
    border-radius: 50%;
    overflow: hidden;
}

.wrap .content {
    min-height: 400px;
    background: url('bg.jpg');
}