Attribut border-block-end-color CSS

Page précédente border-block-end
Page suivante border-block-end-style

Définition et utilisation

border-block-end-color l'attribut soit utilisé pour définir la couleur de la bordure à la fin de la direction en bloc.

Remarque :Pour que border-block-end-color Pour que l'attribut fonctionne, il est nécessaire de définir border-block-end-style attribut.

L'attribut CSS border-block-end-color est similaire à l'attribut CSS border-bottom-width,border-left-width,border-right-width et border-top-width Très semblable, mais border-block-end-color L'attribut dépend de la direction en bloc.

Remarque :les propriétés CSS associées writing-mode Définit la direction en bloc. Cela affecte le début et la fin du bloc ainsi que border-block-end-color Résultat de l'attribut. Pour les pages en anglais, la direction en ligne est de gauche à droite, et la direction en bloc est vers le bas.

Exemple

Exemple 1

Définir la couleur de la bordure à la fin de la direction en bloc :

div {
  border-block-end-style: solid;
  border-block-end-color: pink;
}

Essayez-le vous-même

Exemple 2 : combinaison de l'attribut writing-mode

La position de la couleur de la bordure à la fin de la direction en bloc est affectée par writing-mode Effet de l'attribut :

div {
  border-block-end-style: solid;
  writing-mode: vertical-rl;
  border-block-end-color: 5px;
}

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
color	La couleur de la bordure doit être spécifiée. Par défaut, c'est la couleur actuelle de l'élément. Voir :Valeurs de couleur CSS.
transparent	La couleur de la bordure doit être transparente.
initial	Set this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Détails techniques

Valeur par défaut :	Couleur actuelle de l'élément
Héritabilité :	Non
Création d'animation :	Prise en charge. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.borderBlockEndColor="pink"