Bordes, listas, el primero y el último

Esta es una solución sencilla a un problema común.

Tengo una lista cualquiera y quiero ponerle un borde o separador a cada uno de los items que la componen:

<div id="demobordes">
  <ul>
    <li>el primer item</li>
    <li>el segundo item</li>
    <li>el tercer item</li>
    <li>el último item</li>
</ul>

Entonces pruebo con una regla básica:

<style>
#demobordes li {
  background-color: #000;
  border-bottom: 2px dotted #ABC;
  border-top: 2px dotted #ABC;
  color: #888;
  padding: 5px 10px;
}
</style>

pero ... el primero se ve bien, el último también y los del medio se superponen, haciéndolos mas "gordos":

• el primer item
• el segundo item
• el tercer item
• el último item

Entonces, pruebo, sólo dejo un borde, el de abajo o el de arriba pero, en ambos casos siempre me falta uno; o el primer item no tiene un borde superior o le falta el borde al último y yo quiero que todos tengan un borde:

• el primer item
• el segundo item
• el tercer item
• el último item

• el primer item
• el segundo item
• el tercer item
• el último item

Y como el navegador no es adivino, lo que debo hacer es indicarle eso, si todos los items tienen un borde inferior (border-bottom) quiero que el primero tenga un borde superior y para eso, uso first-child:

#demobordes li {
  .......
  border-bottom: 2px dotted #ABC;
}
#demobordes li:first-child { border-top: 2px dotted #ABC; }

Y al revés, si todos tienen un borde superior (border-top) le digo que el último tenga un borde inferior con last-child:

#demobordes li {
  .......
  border-top: 2px dotted #ABC;
}
#demobordes li:last-child { border-bottom: 2px dotted #ABC; }

Y con eso resuelvo el asunto:

• el primer item
• el segundo item
• el tercer item
• el último item

• el primer item
• el segundo item
• el tercer item
• el último item