Proprietà border-block-color CSS

Pagina precedente border-block
Pagina successiva border-block-end

Definizione e uso

border-block-color Impostare il colore del bordo del blocco dell'elemento per la proprietà.

Attenzione:Per rendere border-block-color L'attributo deve essere impostato per essere efficace border-block-style.

border-block-color I valori delle proprietà possono essere impostati in diversi modi:

Se border-block-color Le proprietà hanno due valori:

border-block-color: pink lightblue;

Il colore della cornice di partenza del blocco è pink
Il colore della cornice di fine del blocco è lightblue

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

border-block-color: pink;

Il colore della cornice di partenza e di fine del blocco è pink

CSS border-block-color Le proprietà sono simili all'attributo border-bottom-color,border-left-color,border-right-color e border-top-color Le proprietà sono molto simili, ma border-block-color L'attributo dipende dalla direzione del blocco.

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

Esempio

Esempio 1

Impostare il colore della cornice nella direzione del blocco:

#example1 {
  border-block-style: solid;
  border-block-color: pink;
}
#example2 {
  border-block-style: solid;
  border-block-color: pink lightblue;
}

Prova tu stesso

Esempio 2: Combinazione dell'attributo writing-mode

La posizione di partenza e di arrivo della cornice nella direzione del blocco è influenzata dall'attributo writing-mode:

div {
  writing-mode: vertical-rl;
  border-block-color: blue;
}

Prova tu stesso

Sintassi CSS

border-block-color: color|transparent|initial|inherit;

Valore dell'attributo

Valore	Descrizione
color	Specificare il colore della cornice. Il colore predefinito è il colore corrente dell'elemento. Visualizza i valori di colore CSS per ottenere una lista completa di valori di colore.
transparent	Specificare il colore della cornice dovrebbe essere trasparente.
initial	Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit	Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito:	Il colore corrente dell'elemento
Ereditarietà:	No
Creazione degli animazioni:	Supporto. Vedi:Proprietà correlate agli animazioni.
Versione:	CSS3
Sintassi JavaScript:	object.style.borderBlockColor="pink"