ul li last-child radius not working

Question

I want my last list item to have rounded corners on the right, but it doesn't work. Can't figure it out by my self, tried everything and searched everywhere.

#navigation {
  float: left;
  border: 1px solid #C0C0C0;
  border-radius: 20px;
  background: linear-gradient(#64717E, #E5E3DE);
  box-shadow: 2px 2px 15px #64717E inset, 0 0 20px #000;
}
#navigation ul {
  height: 20px;
  margin: 0;
  padding: 0;
}
#navigation ul li {
  padding: 0 15px 0 15px;
  display: inline;
  //  border: 2px solid #C0C0C0;
  background: linear-gradient(#64717E, #C0C0C0, #64717E);
  list-style-type: none;
}
#navigation ul li:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
#navigation ul li:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

<div id="navigation">
  <ul>
    <li><a href="#">start<a></li>
 <li><a href="#">imperdiet<a></li>
 <li><a href="#">condimentum<a></li>
 <li><a href="#">nunc<a></li>
 <li><a href="#">phasellus<a></li>
  </ul>
</div>

Feedback as for the rest of the html and css is appreciated.

Answer 1

Your problem is that you haven't closed your <a> tags and instead are opening a nested <a> tag which isn't even a valid thing.

This means your ul li:first-child works, because your first child is present and valid, but then the <a> tag is never closed, so the browser gets confused, and never knows where a a last-child is.

Just close your <a> tags.

<div id="navigation">
    <ul>
        <li><a href="#">start</a></li>
        <li><a href="#">imperdiet</a></li>
        <li><a href="#">condimentum</a></li>
        <li><a href="#">nunc</a></li>
        <li><a href="#">phasellus</a></li>
    </ul>
</div>

JSFiddle example