jquery rounded corners on first and last li

How do i create rounded top left and bottom left corners of the first LI and rounded top right and bottom right of the last li using jquery?

I understand that i could use border-radius but that wont be a cross browser solution.

Here is what i have started: http://jsfiddle.net/c7NyZ/1/

If you can add a resource to the jsfiddle and update it id be greatful.

HTML:

<div id="new-menu-upper">
 <ul id="top-nav">
 <li><a href="/t-topnavlink.aspx">menu item 1</a></li>
 <li><a href="/t-topnavlink.aspx">menu item 2</a></li>
 <li><a href="/t-topnavlink.aspx">menu item 3</a></li>
 <li><a href="/t-topnavlink.aspx">menu item 4</a></li>
 <li><a href="/t-topnavlink.aspx">menu item 5</a></li>
 <li><a href="/t-topnavlink.aspx">menu item 6</a></li>
 </ul>
 </div>
 

CSS:

div#new-menu-upper {
     border: 0 solid red;
     height: 40px;
     margin: 0 5px 10px;
     padding-top: 63px;
 }
 ul#top-nav li {
     background-image: url("http://i47.tinypic.com/21nqxjc.png");
     background-repeat: repeat;
     border-right: 2px solid lightgrey;
     float: left;
     height: 41px;
     width: 156px;
 }
 ul#top-nav li a {
     color: White;
     display: inline-block;
     font-family: Arial;
     font-size: 12px;
     font-weight: bold;
     letter-spacing: 1px;
     padding-left: 38px;
     padding-top: 12px;
     text-transform: uppercase;
 }
 

EDIT: IT HAS TO BE A CROSS BROWSER SOLUTION, MEANING IT HAS TO WORK WITH MIN IE7
*EDIT: ADDED JQUERY.CORNERS RESOURCE TO JSFIDDLE AND TRIED TO MAKE FIRST LI RENDER WITH CORNER BUT ITS NOT WORKING - PLEASE CAN YOU HELP - http://jsfiddle.net/c7NyZ/4/ *

---