Linee di separazione con CSS

Creare linee di separazione nei siti web è un’operazione che può essere effettuata usando solo i CSS: la logica è quella di creare un rettangolo ovviamente tanto sottile da apparire come una linea. Se a questo aggiungiamo un bordo, scegliendo l'esatto colore e assegnandogli una larghezza necessariamente inferiore a quella del rettangolo, si ottiene l'ombreggiatura.

HTML

 
<div class="linea orizzontale"></div>
<div class="linea verticale"></div>
 

CSS

 
.linea.orizzontale
{
            width: 2px;
            height: 300px;
            background-color:black;
            border-right:1px solid #3f3f3f;
}
.linea.verticale
{
            width: 300px;
            height: 2px;
            background-color:black;
            border-bottom:1px solid #3f3f3f;
}