Удалить верхнюю границу первого дочернего элемента и нижнюю границу последнего дочернего элемента в CSS

У меня есть следующий HTML:

<ul>
<li>FIRST</li>
<li>SECOND</li>
<li>THIRD</li>
<li>FOURTH</li>
<ul>

И следующий CSS:

li
{
 border-top:1px solid #FFF;
 border-bottom: 1px solid #D0D0D0;       
}

Как удалить верхнюю границу для первого элемента LI и нижнюю границу для последнего элемента LI?

Ответы

li:first-child {
  border-top: none;
}
li:last-child {
  border-bottom: none;
}

Просто так.

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

Например,

body {
  background: #acc;
}

li:not(:first-child) {
  border-top: 1px solid #fff;
}

li:not(:last-child) {
  border-bottom: 1px solid #000;
}

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
</ul>