propriété border-inline-color CSS

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

définition et utilisation

border-inline-color l'attribut définisse la couleur de bord de l'élément en direction en ligne.

Remarque :pour que border-inline-color l'attribut prend effet, il est nécessaire de définir border-inline-style.

border-inline-color les valeurs de l'attribut peuvent être définies de différentes manières :

si border-inline-color l'attribut a deux valeurs :

border-inline-color: rose bleu;

la couleur de bord de début en ligne est rose
la couleur de bord de fin en ligne est bleue

si border-inline-color l'attribut a une valeur :

border-inline-color: blue;

les couleurs de bord de début et de fin en ligne sont toutes bleues

de CSS border-inline-color propriété et border-bottom-color,border-left-color,border-right-color et border-top-color Les attributs sont très similaires, mais border-inline-color L'attribut dépend de la direction en ligne.

Remarque :les attributs CSS associés writing-mode,text-orientation et direction Définit la direction en ligne. Cela affecte le début et la fin de la ligne, ainsi que border-inline-color Effet 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 dans la direction en ligne :

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

Essayer par vous-même

Exemple 2 : combinaison de l'attribut writing-mode

La bordure à l'emplacement de début et de fin de la direction en ligne est affectée par writing-mode Effet de l'attribut :

div {
  border-inline-style: solid;
  writing-mode: vertical-rl;
  border-inline-color: blue;
}

Essayer par vous-même

Exemple 3 : combinaison de l'attribut direction

La bordure à l'emplacement de début et de fin de la direction en ligne est affectée par direction Effet de l'attribut :

div {
  direction: rtl;
  border-inline-color: blue hotpink;
}

Essayer par vous-même

Syntaxe CSS

border-inline-color: La couleur par défaut est la couleur actuelle de l'élément.|transparent|initial|inherit;

Valeur de l'attribut

Valeur	Description
La couleur par défaut est la couleur actuelle de l'élément.	Définir la couleur de la bordure. Voir les valeurs de couleur CSS pour obtenir la liste complète des valeurs possibles.
transparent	La couleur de la bordure doit être transparente.
initial	Réinitialise 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 :	La 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.borderInlineColor="pink"