border

La proprietà border è una proprietà CSS shorthand che consente di specificare vari valori per visualizzare una linea attorno all’elemento a cui viene applicata.

.elemento {
  border: 3px solid yellow;
  height: 150px;
  width: 150px;
}

Sintassi

border: <dimensione della linea> || <stile della linea> || <colore>

Valori

La proprietà border può accettare uno o più dei valori di seguito elenecati:

  • dimensione della linea:
    • un valore numerico misurato in una delle unità CSS (px, em, rem, vh e vw);
    • thin: l’equivalente di 1px;
    • medium: l’equivalente di 3px;
    • thick: l’equivalente di 5px;
  • stile della linea:
    • none: nessuna linea visualizzata, valore predefinito;
    • solid: linea continua di un colore solido;
    • hidden: una linea è disegnata, ma non è visibile. Questo può essere utile per aggiungere larghezza o altezza extra a un elemento senza visualizzare un bordo;
    • dashed: una linea di trattini;
    • dotted: una linea di puntini;
    • double: vengono disegnate due linee intorno l’elemento;
    • groove: aggiunge una base smussata del colore specificato in modo che l’elemento appaia come premuto all’interno del documento;
    • ridge: simile a groove, ma il colore specificato fa apparire l’elemento in rilievo rispetto al documento;
    • inset: crea una linea di due toni leggermente diversi facendo apparire l’elemento leggermente premuto all’interno del documento;
    • outset: simile a inset, i colori sono però invertiti per far apparire l’elemento leggermente in rilievo rispetto al documento;
  • colore bordo:
    • specifica il colore del bordo, accetta tutti i valori validi come colori.

Ecco di seguito un esempio pratico di come appaiono tutti i valori che sono appena stati elencati: