Rounding the left and right corners only of a li nav bar HTML

Question

Hi I would like some help im struggling to round the corners of just the far right li element and the far left li element.

I have had a look at other peoples questions they have posted but Im struggling to understand and apply it to my code.

what im trying to do is round the top left corner of id topnavleft and rounding the top right corner of topnavright.

heres my html

<div id="navmenu">

    <ul id="list-nav">

        <li id="topnavleft"><a href="index.html">Home</a></li>

        <li><a href="design.html">Design</a></li>

        <li><a href="about.html">About</a></li>

        <li><a href="kayaking-di">kayaking Disciplines</a></li>

        <li id="topnavright"><a href="links.html">Useful links</a></li>

    </ul><!-- ul end list-nav -->

</div><!-- div end navmenu -->

and heres the css

    #navmenu {
    width : 980px;
    margin-left : auto;
    margin-right : auto;
    height: 33px;
}

ul#list-nav {
    list-style : none;
    padding : 0;
    width : 980px;
    height : 33px;
    background-color : #656565;
    font-family:Tahoma, Geneva, sans-serif;
    margin-top : 0;
    font-style:normal;
    font-size:14px;
}

ul#list-nav li {
    display : inline;
    width : 980px;
    height : 33px;;
    background-color : #656565;
}

ul#list-nav li a {
    text-decoration : none;
    padding : 8px 0;
    width : 196px;
    background : #656565;
    color : #eee;
    float : left;
    text-align : center;
}

ul#list-nav li a:hover {
    background : #999;
    color : #fff;
    font-family:Tahoma, Geneva, sans-serif;
}

ul#list-nav li a:active {
    background : #999;
    color : #fff;
    font-family:Tahoma, Geneva, sans-serif;
}

#container #navmenu #list-nav #topnavright {
    border-radius:25px;
}

#container #navmenu #list-nav #topnavleft {
    border-radius:25px;
}

Answer 1

You can do this with specific selectors for last and first child:

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

On the property border-radius you can set an specific value for each corner like this:

border-radius: 3px 4px 5px 6px;

Where the values are:

border-radius: top-left top-right bottom-right bottom-left;

Then if you already have id for the specific li you can try this: You also need to set the border-radius for the a tag and general container/

ul#list-nav {
   border-radius:10px 10px 0 0; /*Top both sides */
}
#topnavleft, #topnavleft a {
   border-radius: 10px 0 0 0; /*Only top left with radius*/
}
#topnavright, #topnavright a {
   border-radius: 0 10px 0 0; /*Only top right with radius*/
}

The demo http://jsfiddle.net/q5FJy/9/

Edit

You also can set the border-radius only for the main container but hidden the overflow:

ul#list-nav {
  border-radius:10px 10px 0 0;
  overflow:hidden;
}

New demo http://jsfiddle.net/q5FJy/11/

Answer 2

#topnavleft {border-top-left-radius: 3px;}
#topnavright {border-top-right-radius: 3px;}

OR

#list-nav {
    border-radius: 3px 3px 0 0;
    overflow: hidden;
}