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

IE9 no sub-pixel anti-aliasing on border-radius

IE9 no sub-pixel anti-aliasing on border-radius

Problem

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;

Problem courtesy of: Registered User

Solution

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');
}
Solution courtesy of: Magnus Magnusson

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

IE9 no sub-pixel anti-aliasing on border-radius

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×