jquery rounded corners on first and last li

Question

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/

SOLUTION: http://jsfiddle.net/c7NyZ/6/ (I DIDNT APPLY THE JS LIBRARY!)

EDIT: The first Li seems to merge with the 2nd li, can you fix this?? - http://jsfiddle.net/c7NyZ/7/

Answer 1

Simple, Just use first-child and last-child pseudo elements

  ul#top-nav li:first-child{
    border-radius : 10px 0px 0px 10px;
  }
  ul#top-nav li:last-child{
    border-radius : 0px 10px 10px 0px;
  }

JSBIN

If you are up for using css3 pie, then

 ul#top-nav li{behavior: url(PIE.htc);}  
 ul#top-nav li:first-child{
        border-radius : 10px 0px 0px 10px;
 }
 ul#top-nav li:last-child{
      border-radius : 0px 10px 10px 0px;
 }

---

Otherwise, if you want to incorporate curves in IE 6,7,8 The you must either use well-placed images or vector graphics libraries.

Checkout css3pie - its neat!

Answer 2

This is my version:

ul#top-nav li:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
ul#top-nav li:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

jsFiddle

Edit: works on latest Firefox, Opera and Chrome. I'm using linux and can't tell about IE

Answer 3

The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera.Here is the css code :

  .first_li{
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
   -moz-border-radius : 10px 0px 0px 10px; /*firefox 3.6 and earlier*/
  }
  .last_li{
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
   -moz-border-radius : 0px 10px 10px 0px;/*firefox 3.6 and earlier*/
   }

And here is the corressponding jquery code :

$(function(){ // use any other event handler like click, hover or others
     $('ul#top_nav li:first').addClass('.first_li');
     $('ul#top_nav li:last').addClass('.last_li');
 });

Answer 4

use this for all browsers:

ul li:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
ul li:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}

Answer 5

In the (not so) good old times, people did it the hard way. This was the hard way:

• Surround your boxes with 4 divs
• Add the correct class to each div (top-left, top-right, bottom-left and bottom-right)
• Add an image making a rounded corner on each class
• ???
• Profit!

On your jsfiddle, the code would look like this: http://jsfiddle.net/Ralt/c7NyZ/5/

A real example is shown here: http://www.sitepoint.com/examples/jscorners/four-nested-divs.html

You will see a real tutorial here: http://webcsstips.wordpress.com/2009/07/17/boxes-with-rounded-corners/ There are some nice links on it, like a rounded corner images generator.

That said, I'd just go for CSS3PIE nowadays.