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: 50

Solution 1:

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 2:

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.6em1em;
-moz-border-radius-bottomright:1.6em1em;
-webkit-border-bottom-right-radius:1.6em1em;

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.

Solution 3:

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: 10px10px10px10px;
    display: block;
    margin-left: 78px;
    width: 591px;
behavior: url(pie/PIE.htc);

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