What you are looking for is something like this?
http://jsfiddle.net/gespinha/mkDWj/2/
You should trigger the a
within the first and last li
, not the first and last a
within an li
element, because all li
only have one a
(which is automatically its own first and last.
You other issue was that you were assigning all borders to have the same radius, when you just want the edge borders to have a radius value.
CSS
nav li:first-child a {
border-radius:5px 0 0 5px;
}
nav li:last-child a {
border-radius:0 5px 5px 0;
}
For more detailed information on the border-radius attribute check this documentation http://www.w3schools.com/cssref/css3_pr_border-radius.asp