Top corners curved in IE on current page link - css

Question

Can someone help me understand a way of adding rounded corners top left and top right of the current page link below? I have used jQuery corners but this doesnt work in IE very well... I was looking to use PNG. The space between the corners should be white. The PNG would be transparent letting whatever image was below to show through.
<ul>
<li class="current"><span>Home</span></li>
<li><span>Create Account</span></li>
<li><span>Order a Catalogue</span></li>
<li><span>Distributors</span></li>
<li><span>About Us</span></li>
<li><span>Contact Us</span></li>
<li><span>Login</span></li>
</ul>
Any help would be greatly appreciated.

Answer 1

Draw your rounded rectangle in something like Paint.NET (make sure you have a transparent background!) and make it the exact width of the LI. Give it more than enough height so that you can cut off the button rounded corners and it will still be tall enough to fill the LI. Cut off the bottom rounded corners, crop accordingly, and save it as a PNG. Set it as a background image on the element with CSS...
ul li.current {
background:url(../images/nav-current.png) no-repeat;
}
Note: if you use a background color on the LI, it will bleed through the transparent part of the rounded corners, which is not good.
Moving forward... you can just use the CSS3 border-top-left-radius and border-top-right-radius along with background-color (no images!), but these are not supported in IE8 and older.

Answer 2

Hey friend to apply border radius that works in IE also you have to apply border-radius.htc file and you can apply it to your CSS like this one. In my project i am using it on Div tag but you can use it whereever you want.
div
{
-moz-border-radius: 10px;
background: #D4D0C8;
border: 1px solid #808080;
-webkit-border-radius:10px;
behavior:url(border-radius.htc);
}
you will find border-radius.htc file on google also. If you can provide your emailid then i can mail it to you if you want