Propriété CSS column-rule

❮ Précédent Suivant ❯

Column-rule est une propriété raccourcie, qui définit la style, la largeur et la couleur du règle entre les colonnes. Elle est spécifiée par les propriétés column-rule-style, column-rule-width et column-rule-color.

Quelques extensions de la propriété sont ajoutées, telle que -webkit- pour Safari, Google Chrome, et Opera (plus nouvelles versions), -moz- pour Firefox, -o- pour les versions anciennes d'Opera etc.

Valeur initiale	medium none currentColor
Appliquée à	medium none currentColor
Héritée	Non.
Animable	Oui. La couleur et la largeur de column-rule sont animable.
Version	CSS3
Syntaxe DOM	object.style.columnRule = "5px outset #ccc";

Syntaxe

column-rule: column-rule-width column-rule-style column-rule-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: 30px;
      -webkit- column-rule: 5px dotted #ccc;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 30px;
      -moz-column-rule: 5px dotted #ccc;
      column-count: 3;
      column-gap: 30px;
      column-rule: 5px dotted #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de column-rule-style</h2>
    <p>Ici column-rule est définie à 5px dotted gray.</p>
    <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 seulement une valeur et ça fonctionne encore.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 30px;
      -webkit- column-rule: dashed;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 30px;
      -moz-column-rule: dashed;
      column-count: 3;
      column-gap: 30px;
      column-rule: dashed;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de column-rule-style</h2>
    <p>Ici column-rule est définie seulement "dashed".</p>
    <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!

Dans cet exemple, la largeur du règle est 10px, le style est "groove" et la couleur est gris.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 4;
      -webkit-column-gap: 30px;
      -webkit- column-rule: 10px groove #ccc;
      /* Firefox */
      -moz-column-count: 4;
      -moz-column-gap: 30px;
      -moz-column-rule: 10px groove #ccc;
      column-count: 4;
      column-gap: 30px;
      column-rule: 10px groove #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de column-rule-style</h2>
    <p>Ici column-rule est définie à 10px groove gray.</p>
    <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
column-rule-width	Définit la largeur entre les colonnes. La valeur initiale est "medium".
column-rule-style	Définit le style du règle entre les colonnes. La valeur initiale est "none".
column-rule-color	Définit la couleur du règle. La valeur initiale est la couleur actuelle de l'élément.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.