border

A differenza di margin e padding, border necessita di 3 proprietà distinte: dimensione del bordo, tipologia di bordo e colore del bordo. Vediamo queste tre proprietà singolarmente.

La dimensione può essere espressa in px o con valori predefiniti, ossia:

  • thin; bordo fino;

  • thick; bordo spesso;

  • medium; bordo normale;

  • none; nessun bordo.

Se vuoi specificare una dimensione fissa, puoi usare solo px come unità: purtroppo le dimensioni relative non sono supportate.

La tipolgia di bordo, invece, è la modalità con cui il bordo si presenta all’utente. Ne esistono svariati: solid, dotted, dashed, double, groove, ridge, inset, outset, none.

Il valore solid è quello predefinito e crea un bordo di tinta unica.

Per finire, il colore lo puoi esprimere sempre come meglio ti aggrada, allo stesso modo del testo o dello sfondo.

Ricapitolando, quindi, i bordi li puoi esprimere in questo modo:

.highlight{
   border: 3px solid #ff0000;
}

Questo significa che tutti e 4 i bordi dell’elemento in questione saranno spessi 3px, pieni (solid) e di colore magenta.

See the Pen oDJrc by Giovanni Buffa (@gioppy) on CodePen

Da ciò puoi ricavare che esistono sia le proprietà per i singoli valori, sia le proprietà per i singoli bordi1. Ma andiamo con ordine:

  • border-width; rappresenta lo spessore dei bordi;

  • border-style; rappresenta lo stile del bordo;

  • border-color; rappresenta il colore del bordo.

L’esempio qui sopra, quindi, potrebbe essere riscritto in questo modo:

.highlight{
   border-width: 3px;
   border-style: solid;
   border-color: #ff0000;
}

Questo ti dovrebbe far anche capire che puoi personalizzare spessore, tipologia e colore per ogni singolo bordo:

.highlight{
   border-width: 3px 5px;
   border-style: solid dotted dashed;
   border-color: #ff0000 black rgb(255, 255, 255) #a1a1a1;
}

Da vedere non sarà il massimo, però lo puoi fare!

Come ultima cosa, ricorda che hai la possibilità di definire le singole proprietà per ogni singolo bordo. border-top-width, border-top-style e border-top-color, border-right-width, border-right-style e border-right-color, border-bottom-width, border-bottom-style e border-bottom-color, border-left-width, border-left-style e border-left-color.

1. L’ordine di attribuzione dei bordi equivale a quanto visto per margin e padding: partendo da top e andando in senso orario.

padding border-radius