Column-rule-width - Propriété CSS

Schéma de la syntaxe de column-rule-width.

Description des termes utilisés sur le schéma :

• length est une valeur numérique, positive ou nulle, suivie d'une des unités de dimension.

Description de la propriété column-rule-width.

column-rule-width définit l'épaisseur de la ligne de séparation entre les colonnes. Voyez aussi la propriété résumée column-rule.

Notez que l'épaisseur de la ligne de séparation est prise sur la largeur de la gouttière : elle ne s'ajoute pas. La présence d'une ligne de séparation ne change donc pas la largeur des colonnes ni leur espacement.

Si l'épaisseur de la ligne de séparation est supérieure à la largeur de la gouttière, la ligne empiète sur le contenu, mais sans le masquer, le contenu étant au dessus.

La description de la propriété column-rule-width a été transféré dans le module CSS Gap Decorations. La propriété pourra s'appliquer aussi bien aux conteneur multi-colonnes qu'aux conteneurs grille ou aux conteneurs flex.

Pour des explications détaillées sur les possibilités du multi-colonage en CSS, reportez-vous à la propriété columns. Pour une synthèse sur les filets, voyez rule.

Valeurs pour column-rule-width.

• column-rule-width: medium;

  Valeur par défaut. Ligne d'épaisseur intermédiaire, de environ 4 pixels (celle valeur peut être différente d'un navigateur à l'autre).

  Texte de démonstration. On appelle "gouttière" l'espace laissé vide entre chaque paire de colonnes. Il est d'usage de fixer la largeur de la gouttière à la largeur de quatre caractères moyens. Il ne faut pas confondre la largeur de la gouttière avec l'épaisseur du filet qui peut éventuellement être présent.
  column-rule-width:medium;
• column-rule-width: thin;

  Ligne de séparation fine (de l'ordre de 1 pixel).

  Texte de démonstration. On appelle "gouttière" l'espace laissé vide entre chaque paire de colonnes. Il est d'usage de fixer la largeur de la gouttière à la largeur de quatre caractères moyens. Il ne faut pas confondre la largeur de la gouttière avec l'épaisseur du filet qui peut éventuellement être présent.
  column-rule-width:thin;
• column-rule-width: thick;

  Ligne de séparation épaisse (de l'ordre de 6 pixels).

  Texte de démonstration. On appelle "gouttière" l'espace laissé vide entre chaque paire de colonnes. Il est d'usage de fixer la largeur de la gouttière à la largeur de quatre caractères moyens. Il ne faut pas confondre la largeur de la gouttière avec l'épaisseur du filet qui peut éventuellement être présent.
  column-rule-width:thick;
• column-rule-width: 3px;

  Un nombre positif ou égal à zéro, suivi d'une unité de dimension (voir les unités de dimension).
  Les pourcentages ne sont pas acceptés.

  Texte de démonstration. On appelle "gouttière" l'espace laissé vide entre chaque paire de colonnes. Il est d'usage de fixer la largeur de la gouttière à la largeur de quatre caractères moyens. Il ne faut pas confondre la largeur de la gouttière avec l'épaisseur du filet qui peut éventuellement être présent.
  column-rule-width:15px;
• column-rule-width: medium 15px thin; column-rule-width: repeat(5, medium 15px);

  Un série de nombres positifs ou égaux à zéro, suivi d'une unité de dimension, et séparés par un espace.
  Chacun des nombres est appliqué à un des traits de séparation. Si le nombre de traits est supérieur, la liste est reprise depuis le début. Il est possible également d'utiliser la fonction repeat() si le nombre de traits est important.

  Texte de démonstration. On appelle "gouttière" l'espace laissé vide entre chaque paire de colonnes. Il est d'usage de fixer la largeur de la gouttière à la largeur de quatre caractères moyens. Il ne faut pas confondre la largeur de la gouttière avec l'épaisseur du filet qui peut éventuellement être présent.
  column-rule-width:medium 15px;
• column-rule-width: initial; (medium) column-rule-width: inherit; column-rule-width: revert; column-rule-width: revertLayer; column-rule-width: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de column-rule-width.

Comme toutes les propriétés qui acceptent une valeur numérique, la propriété column-rule-width peut être animée de façon continue (passage progressif d'une valeur à l'autre).

Cette animation permet également de voir que l'épaisseur du filet (gérée par column-rule-width) ne change pas la largeur de la gouttière (gérée par column-gap).

Exemple interactif avec la propriété column-rule-width.

Compatibilité des navigateurs avec column-rule-width.

Les mises en page multi-colonnes sont partiellement prises en charge par les navigateurs récents (voir sur le tableau ci-dessous) : néanmoins, ces incompatibilités sont rarement gênantes. La propriété column-rule-width est bien reconnue avec sa première spécification, pour les conteneurs multi-colonnes, mais pas encore pour les grilles ou les flex-box (2025).

Remarques :

(1) Ne supporte pas les valeurs avoid (dans le contexte d'une mise en page multi-colonnes), avoid-column et avoid-page pour les propriétés beak-after, break-before et break-inside.

(2) Ne supporte pas les valeurs break-after, break-before et break-inside.

1

Mise en page
multi colonnes

2

Propriété
column-rule-width

Estimation de la prise en charge globale.

18%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

2

QQ Browser

2

Opéra Mobile

2

Firefox

2

Chrome

2

Safari

Edge

2

Opéra

2

Chrome pour Androïd

2

Safari sur IOS

Samsung Internet

2

UC Browser pour Androïd

2

Androïd Brower

2

Firefox pour Androïd

2

KaiOS Browser

2

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété column-rule-width.

• Module CSS - Mise en page multi-colonnes - Niveau 1

  Première description des mises en page sur plusieurs colonnes.
  Introduction des propriétés qui s'y rapportent, dont column-rule-width.
  

  23 Juin 1999

  Document de travail.

  

  17 Décembre 2009

  Candidat à la recommandation.

  

  

• Module CSS - Décoration des espaces - Niveau 1.

  La propriété column-rule-width a été introduite dans le module Gap Decorations, ce qui étendra son usage aux conteneurs grille et flex-box.
  

  17 Avril 2025

  Document de travail.

  

  

  

Voir aussi, à propos des mises en page multi-colonnes.

La spécification CSS Multi-column Layout Module (Module CSS - Mise en page multi-colonnes) décrit tout ce qui concerne les mises en page multi-colonnes. La propriété column-rule-width est donc référencée dans ce module, ainsi que les termes ci-dessous :

Propriétés :