Propriété CSS column-rule-color

La propriété column-rule-color définit la couleur du règle.

La couleur du règle peut aussi être spécifiée par la propriété raccourcie column-rule.

Vous pouvez trouver les couleurs web dans la séction Couleurs HTML et essayez de définir votre couleurs préférées avec notre outil Pipette de couleur.

Valeur initiale	currentColor
Appliquée à	Éléments multicol.
Héritée	Non.
Animable	Oui. La couleur de règle est animable.
Version	CSS3
Syntaxe DOM	object.style.columnRuleColor = "#666";

Syntaxe

column-rule-color: color | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 20px;  
      -webkit-column-rule-style: dashed;
      -webkit-column-rule-color: lightgreen;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 20px;  
      -moz-column-rule-style: dashed;
      -moz-column-rule-color: lightgreen;
      column-count: 3;
      column-gap: 20px;
      column-rule-style: dashed;
      column-rule-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de column-rule-color</h2>
    <div>
      Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.
    </div>
  </body>
</html>

Essayez-vous-même!

Vous pouvez définir hexadecimal, RGB, RGBA, HSL, HSLA ou les noms des couleurs en tant qu'une valeur pour la propriété column-rule-color property.

Voici un exemple, où une valeur hexadecimale est définie pour la propriété column-rule-color :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 40px;  
      -webkit-column-rule-style: solid;
      -webkit-column-rule-color: #8ebf42;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 40px;  
      -moz-column-rule-style: solid;
      -moz-column-rule-color: #8ebf42;
      column-count: 3;
      column-gap: 40px;
      column-rule-style: solid;
      column-rule-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de column-rule-color</h2>
    <div>
      Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.
    </div>
  </body>
</html>

Essayez-vous-même!

Un exemple avec la propriété column-rule-color en utilisant une valeur RGB :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 40px;  
      -webkit-column-rule-style: double;
      -webkit-column-rule-color: rgb(234, 211, 21);
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 40px;  
      -moz-column-rule-style: double;
      -moz-column-rule-color: rgb(234, 211, 21);
      column-count: 3;
      column-gap: 40px;
      column-rule-style: double;
      column-rule-color: rgb(234, 211, 21);
      }
    </style>
  </head>
  <body>
    <h2>Exemple de column-rule-color</h2>
    <div>
      Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.
    </div>
  </body>
</html>

Essayez-vous-même!

Voici un exemple avec avec la propriété column-rule-color en utilisant une valeur HSL:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 30px;  
      -webkit-column-rule-style: solid;
      -webkit-column-rule-color: hsl(351, 97%, 57%);
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 30px;  
      -moz-column-rule-style: solid;
      -moz-column-rule-color: hsl(351, 97%, 57%);
      column-count: 3;
      column-gap: 30px;
      column-rule-style: solid;
      column-rule-color: hsl(351, 97%, 57%);
      }
    </style>
  </head>
  <body>
    <h2>Exemple de column-rule-color</h2>
    <div>
      Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.
    </div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
color	Définit la couleur du règle. Les noms des couleurs, les codes hexadecimaux des couleurs, rgb(), rgba(), hsl(), hsla() peuvent être utilisés.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.