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/