CODEWITHSUNDEEP
javascripthtmlcss
Ibra038
Ibra038

Reputation: 171

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

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!

Upvotes: 3

Views: 19053

Answers (3)

webslatesoftware
webslatesoftware

Reputation: 221

use make a curve border .ping image in photoshop and use it .....because border-radius-bottomleft ,border-radius-bottom right etc not work on ie6-8....only border-radius property work in ....

THAT IS NOT POSSIBLE TO SOLVE THAT PROBLEM USING BY CSS SO USE THAT TRICK

background-color: #E8EDEF;
    border-radius: 10px 10px 10px 10px;
    display: block;
    margin-left: 78px;
    width: 591px;
behavior: url(pie/PIE.htc);

border-radius-bottom right*/ not working in ie6-8

Upvotes: 0

twister_void
twister_void

Reputation: 1389

border-bottom-right-radius Browser Support:

border-bottom-right-radius is supported as-is in Opera 10.

In order to get it to work in Firefox and Safari, you have to use two related properties:

-moz-border-radius-bottomright - for Firefox 3+

-webkit-border-bottom-right-radius - for Safari 2+

It should be supported by Internet Explorer 9.

border-bottom-right-radius Examples:

Create a standard rounded corner:

border-bottom-right-radius:1em;
-moz-border-radius-bottomright:1em;
-webkit-border-bottom-right-radius:1em;

To create a shallower curve:

border-bottom-right-radius:1.6em 1em;
-moz-border-radius-bottomright:1.6em 1em;
-webkit-border-bottom-right-radius:1.6em 1em;

border-bottom-right-radius Special Notes: Don't forget to set the -moz and -webkit styles as well as the basic border-bottom-right-radius so that your curves show up in most modern browsers.

Upvotes: 0

chipcullen
chipcullen

Reputation: 6960

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.

Upvotes: 10

Related Questions