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: