w3docs logo

Propriété CSS column-rule-width

La propriété CSS column-rule-width définit la largeur du règle entre les colonnes.

Premièrement, vous devez définir les propriétés columns ou column-rule-style et puis la propriété column-rule-width. Un élément doit avoir quelques règles avant que vous définissiez la largeur.

Cette propriété a les valeurs suivantes:

  • medium
  • thick
  • thin
  • length
La spécification ne définit pas l'épaisseur exacte de chaque mot-clé. De toute façon, ils toujours suivent à cet ordre: mince ≤ moyenne ≤ épais.
Valeur initiale medium
Appliquée à Éléments multicol.
Héritée Non.
Animable Oui. La largeur et la couleur du règle sont animable.
Version CSS3
Syntaxe DOM object.style.columnRuleWidth = "5px";

Syntaxe

column-rule-width: medium | thin | thick | length | initial | inherit;

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: dotted;
      -webkit-column-rule-color: #666;
      -webkit-column-rule-width: 15px;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 40px;
      -moz-column-rule-style: dotted;
      -moz-column-rule-color: #666;
      -moz-column-rule-width: 15px;
      column-count: 3;
      column-gap: 40px;
      column-rule-style: dotted;
      column-rule-color: #666;
      column-rule-width: 15px;
      text-align: justify;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété column-rule-width</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>

Un autre exemple, où la largeur de la règle est "thin".

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-width: thin;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 40px;
      -moz-column-rule-style: solid;
      -moz-column-rule-width: thin;
      column-count: 3;
      column-gap: 40px;
      column-rule-style: solid;
      column-rule-width: thin;
      text-align: justify;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété column-rule-width</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>

Voici un exemple, où la largeur du règle est définie à "15px".

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: groove;
      -webkit-column-rule-color: #1c87c9;
      -webkit-column-rule-width: 15px;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 40px;
      -moz-column-rule-style: groove;
      -moz-column-rule-color: #1c87c9;
      -moz-column-rule-width: 15px;
      column-count: 3;
      column-gap: 40px;
      column-rule-style: groove;
      column-rule-color: #1c87c9;
      column-rule-width: 15px;
      text-align: justify;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété column-rule-width</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>

Valeurs

Valeur Description
medium Le règle est moyen. C'est la valeur initiale.
thick Le règle est épais.
thin Le règle est mince.
length Spécifie la largeur du règle.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome edge firefox safari opera
50.0
-webkit- 		12.0
-webkit- 		52.0
+ 3.5 -moz- 		3.0
-webkit- 		11.1
+ 15.0 -webkit-

Pratiquez vos connaissances

Dans CSS, que fait la propriété 'column-rule-width'?
Trouvez-vous cela utile?