Propriété border-block-color CSS

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

Définition et utilisation

border-block-color Définir la couleur de la bordure des éléments en direction de bloc.

Attention :Pour que border-block-color L'application de la propriété nécessite une configuration : border-block-style.

border-block-color Les valeurs des propriétés peuvent être définies de différentes manières :

Si border-block-color Les propriétés ont deux valeurs :

border-block-color: pink lightblue;

La couleur de bordure au début du bloc est pink
La couleur de bordure à la fin du bloc est lightblue

Si border-block-color L'attribut a une valeur :

border-block-color: pink;

La couleur de bordure au début et à la fin du bloc est pink

de la CSS border-block-color Les attributs et border-bottom-color,border-left-color,border-right-color et border-top-color Les attributs sont très similaires, mais border-block-color L'attribut dépend de la direction du bloc.

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

Exemple

Exemple 1

Définir la couleur de la bordure dans la direction du bloc :

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

Essayez-le vous-même

Exemple 2 : combinaison de la propriété writing-mode

La position de départ et de fin de la couleur de bordure dans la direction du bloc est influencée par la propriété writing-mode :

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
color	Définir la couleur de la bordure. La couleur par défaut est la couleur actuelle de l'élément. Voir les valeurs de couleur CSS pour obtenir la liste complète des valeurs de couleur.
transparent	La couleur de la bordure doit être transparente.
initial	Définit cette propriété à sa valeur par défaut. Voir : initial.
inherit	Inherits this property from its parent element. Voir : inherit.

Détails techniques

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