Proprietà CSS border-block-end

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

Raccomandazione del corso:

border-block-end Definizione e uso

CSS border-block-end Le proprietà sono le forme abbreviate dei seguenti attributi CSS: border-bottom,border-left,border-right e border-top Le proprietà sono molto simili, ma border-block-end L'attributo dipende dalla direzione del blocco.

Attenzione:le proprietà CSS correlate writing-mode Definisce la direzione del blocco. Questo influisce sulla posizione di inizio e fine del blocco e border-block-end 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 la larghezza, il colore e lo stile del bordo alla fine della direzione del blocco:

div {
  border-block-end: 10px solid pink;
}

Prova personalmente

Esempio 2: Combinazione dell'attributo writing-mode

La posizione del bordo alla fine della direzione del blocco è influenzata da writing-mode Effetto dell'attributo:

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

Prova personalmente

Sintassi CSS

border-block-end: border-block-end-width border-block-end-style border-block-end-color|initial|inherit;

Valore dell'attributo

Valore	Descrizione
border-block-end-width	Specificare la larghezza del bordo alla fine della direzione del blocco. Il valore predefinito è "medium".
border-block-end-style	Specificare lo stile del bordo alla fine della direzione del blocco. Il valore predefinito è "none".
border-block-end-color	Specificare il colore del bordo alla fine della direzione del blocco. Il valore predefinito è il colore corrente del bordo.
initial	Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit	Inherita da suo padre elemento. Vedi inherit.

Dettagli tecnici

Valore predefinito:	medium none currentcolor
Ereditarietà:	No
Creazione dell'animazione:	Supportato. Vedi:Proprietà correlate all'animazione.
Versione:	CSS3
Sintassi JavaScript:	object.style.borderBlockEnd="pink dotted 5px"