Proprietà border-block-style CSS

Pagina precedente border-block-start-width
Pagina successiva border-block-width

Definizione e uso

border-block-style L'attributo imposta lo stile di bordo dell'elemento nella direzione del blocco.

border-block-style Il valore dell'attributo può essere impostato in modi diversi:

Se border-block-style L'attributo ha due valori:

border-block-style: dashed dotted;

Il bordo di inizio del blocco è un tratteggiato
Il bordo di fine del blocco è un tratteggiato

Se border-block-style L'attributo ha un valore:

border-block-style: tratteggiata;

Il bordo di inizio e fine del blocco sono stili di linea tratteggiata

CSS border-block-style proprietà CSS e proprietà CSS border-bottom-style、border-left-style、border-right-style e border-top-style Molto simile, ma border-block-style L'attributo dipende dalla direzione del blocco.

Attenzione:le proprietà CSS correlate writing-mode Definisce la direzione del blocco. Questo influisce sulla posizione iniziale e finale del blocco, nonché border-block-style Il risultato dell'attributo. Per le pagine in inglese, la direzione in linea è da sinistra a destra, la direzione del blocco è verso il basso.

Esempio

Esempio 1

Impostare lo stile di bordo nella direzione del blocco:

#example1 {
  border-block-style: solid;
}
#example2 {
  border-block-style: dashed dotted;
}

Prova tu stesso

Esempio 2: Combinazione dell'attributo writing-mode

La posizione del bordo dello stile di direzione del blocco iniziale e finale è influenzata da writing-mode Impatto dell'attributo:

div {
  writing-mode: vertical-rl;
  border-block-style: dotted;
}

Prova tu stesso

Sintassi CSS

border-block-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Valore dell'attributo

Valore	Descrizione
none	Valore predefinito. Specificare la mancanza di bordi.
hidden	Uguale a none, ma non in caso di conflitto con i bordi degli elementi tabellari.
dotted	Specificare il bordo a punto.
dashed	Specificare il bordo a tratteggio.
solid	Specificare il bordo a linea continua.
double	Specificare il bordo a doppia linea.
groove	Specificare il bordo scanalato 3D. L'effetto dipende dal valore di border-color.
ridge	Specificare il bordo saldato 3D. L'effetto dipende dal valore di border-color.
inset	Specificare il bordo rientrante 3D. L'effetto dipende dal valore di border-color.
outset	Specificare il bordo sporgente 3D. L'effetto dipende dal valore di border-color.
initial	Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit	Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito:	none
Ereditarietà:	No
Produzione di animazioni:	Non supportato. Vedi:Proprietà correlate agli animazioni.
Versione:	CSS3
Sintassi JavaScript:	object.style.borderBlockStyle="dotted"