Proprietà border-style

La proprietà border-style imposta lo stile del bordo per tutti i lati contemporaneamente o separatamente per ciascun lato. È una proprietà abbreviata per le seguenti proprietà: border-left-style, border-right-style, border-top-style, border-bottom-style.

Sintassi

cssselettore {
  border-style: valore;
}

Valori

Valore	Descrizione
`solid`	Linea continua.
`dotted`	Bordo punteggiato.
`dashed`	Bordo tratteggiato.
`ridge`	Bordo a rilievo (convesso).
`double`	Bordo doppio. Per vedere l'effetto, lo spessore del bordo deve essere almeno `3px`.
`groove`	Bordo incassato (concavo).
`inset`	Bordo interno (incassato).
`outset`	Bordo esterno (in rilievo).
`none`	Assenza di bordo.

Valore predefinito: none.

Numero di valori

La proprietà può accettare 1, 2, 3 o 4 valori, specificati separati da spazio:

Quantità	Descrizione
`1`	Tipo per tutti i lati contemporaneamente.
`2`	Primo valore per l'alto e il basso, secondo - per i bordi sinistro e destro.
`3`	Primo valore per l'alto, secondo - per i bordi sinistro e destro, terzo - per quello inferiore.
`4`	Primo valore per il bordo superiore, secondo - per il destro, terzo - per l'inferiore, quarto - per il bordo sinistro.

Esempio . Valore solid

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

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Esempio . Valore dotted

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

css#elem {
  border-width: 1px;
  border-style: dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Esempio . Valore dashed

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

css#elem {
  border-width: 1px;
  border-style: dashed;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Esempio . Valore ridge

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

css#elem {
  border-width: 3px;
  border-style: ridge;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Esempio . Valore double

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

css#elem {
  border-width: 3px;
  border-style: double;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Esempio . Valore groove

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

css#elem {
  border-width: 3px;
  border-style: groove;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Esempio . Valore inset

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

css#elem {
  border-width: 3px;
  border-style: inset;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Esempio . Valore outset

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

css#elem {
  border-width: 3px;
  border-style: outset;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Esempio

In questo esempio sono impostati diversi tipi di bordo per lati diversi dell'elemento:

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

css#elem {
  border-width: 1px;
  border-style: solid dotted dashed dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Esempio

E ora per i lati diversi dell'elemento sono anche impostati spessori e colori diversi del bordo:

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

css#elem {
  border-width: 1px 2px 3px 4px;
  border-style: dashed dotted solid double;
  border-color: red blue green black;
  width: 300px;
  height: 100px;
}

Результат:

Esempio

Ora per il bordo superiore e inferiore è impostato il tipo solid, mentre per quello destro e sinistro - dotted:

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

css#elem {
  border-width: 1px;
  border-style: solid dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Vedi anche

la proprietà border-color,
che imposta il colore del bordo
la proprietà border-width,
che imposta lo spessore del bordo
la proprietà border,
che è la proprietà abbreviata per il bordo