Praticamente invece di mettere il bordo inferiore a none o dello stesso colore dello sfondo (per farlo scomparire) che in effetti dava un effetto molto strano, era come se tagliasse i bordi dx e sx, lo hai messo a 0 e l'effetto finale è perfetto.
Più precisamente, il valore none (come lo hai usato nel tuo css) non è un valore consentito per la proprietà border-color e relative proprietà derivate, come border-bottom-color (vedi specifiche).

Tutt'al più si potrebbe utilizzare il valore transparent ma non è supportato su versioni poco recenti di IE e verrebbe comunque considerato lo spessore del bordo che andrebbe a generare una sorta di "margine trasparente". La soluzione ideale, e quella comunemente più usata, è azzerare lo spessore del bordo che non serve avere visibile.

Con border-width: 2px 2px 0; si specifica che il bordo superiore (top) e i due bordi laterali (left e right) hanno spessore 2px, mentre quello inferiore (bottom) ha spessore 0.
Chiaramente, quelli visibili, sono influenzati dalla regola precedente, cioè border:solid black;