Corsi on-line

Bordi multipli con CSS

Definire i bordi di un elemento tramite CSS è un’operazione abbastanza semplice, basta specificarne le caratteristiche all’interno di un selettore come il seguente:

#borders {
   position: relative;
   border: 2px dotted #9C1616;
}

Ma come fare nel caso in cui si voglia aggiungere un ulteriore bordo? Neanche questa operazione è particolarmente complessa, si analizzino infatti le caratteristiche del seguente selettore:

#borders:before {
   content: " ";
   position: absolute;
   z-index: -1;
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
   border: 2px dotted #930C0C;
}

Come è semplice notare, il bordo aggiuntivo non è altro che uno pseudo elemento dotato di posizionamento assoluto (a differenza di quello del primo che è invece relativo), seguendo la stessa procedura è possibile aggiungere ulteriori bordi fino al numero desiderato.

Post correlati
  • unico difetto su ie8 non funzia, su ff si

I più letti del mese
Tematiche