ul li радиус последнего ребенка не работает

Question

Я хочу, чтобы мой последний элемент списка имел закругленные углы справа, но он не работает. Сам не могу понять, все перепробовал и везде искал.

#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>

Обратная связь как для остальной части HTML и CSS приветствуется.

Answer 1

Ваша проблема в том, что вы не закрыли свой <a> теги и вместо этого открывают вложенные <a> тег, который даже не является действительной вещью.

Это означает, что ваш ul li:first-child работает, потому что ваш первый ребенок присутствует и действителен, но затем <a> тег никогда не закрывается, поэтому браузер запутывается и никогда не знает, где находится last-child является.

Просто закрой свой <a> теги.

<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