Rounding corners nav bar

css, html

Solution

This also works:

ul#list-nav li {
   border:2px solid blue;
   float:left;
   overflow:hidden;
}

li.first{
   border-top-left-radius:15px;
   border-bottom-left-radius:15px;
}
li.last{
    border-top-right-radius:15px;
   border-bottom-right-radius:15px;
}

Here is the updated fiddle.

Problem

Hi Im having troubles rounding corners on my navigation bar, when I write - `border-radius: 15px;` it round all the corners of the `<a>` but I want only to round of the `<li>` so only the margins of the whole toolbar. Here is a fiddle. thanks EDIT only want home and contact to be rounded

Original source