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

How to fix border radius in IE8 (ie7, ie6)

How to fix border radius in IE8 (ie7, ie6)

Problem

I'm using this CSS:

    #main{  
        border-radius: 50px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
            -webkit-border-radius: 50px;
            -webkit-border-bottom-right-radius: 4px;
            -webkit-border-bottom-left-radius: 4px;
            -moz-border-radius: 50px;
            -moz-border-radius-bottomright: 4px;
            -moz-border-radius-bottomleft: 4px;
    }

It works perfectly in FF, Chrome, IE9(i think) and Safari... But its soooo ugly in IE8 ,

There are users using IE8, i have tried the .htc file but that dont Support border-bottom-right-radius and border-bottom-left-radius...

I'm looking for a JS or HTC file that does support that (or an other Solution for this) I only need it for IE8, but its great if it support IE6 and IE7 aswell!

Thank you!

Problem courtesy of: Ibra038

Solution

You could try CSS Pie. I've not used it, so I can't vouch for it.

Overall, though: I'd let it go. The absence of rounded corners won't break the experience for users in IE8. More capable browsers get the better experience. Progressive enhancement is a beautiful thing.

Solution courtesy of: chipcullen

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 to fix border radius in IE8 (ie7, ie6)

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×