Fondamenti dei bordi in CSS

Ora impareremo ad aggiungere bordi agli elementi. Questo si fa tramite tre proprietà: la proprietà border-width imposta lo spessore del bordo, border-color - il colore, e border-style imposta il tipo di bordo.

Le prime due proprietà funzionano in modo ovvio: border-color accetta colori nello stesso formato della proprietà color, e lo spessore del bordo è impostato in pixel. Invece la proprietà border-style accetta valori sotto forma di parole chiave. Ad esempio, il valore solid imposta una linea continua.

Creiamo, ad esempio, un bordo con spessore di 3 pixel, sotto forma di linea continua, di colore rosso:

html<div id="elem"></div>

css#elem {
  border-width: 3px;    /* spessore 3px */
  border-style: solid;  /* come linea */
  border-color: red;    /* colore rosso */
  width: 300px;
  height: 100px;
}

Результат:

Nelle prossime lezioni esamineremo il lavoro con i bordi più in dettaglio.