Column-rule-width - Propriété CSS

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

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• 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 column-rule-color column-rule.

Notez que l'épaisseur de la ligne de séparation est prise sur la largeur du gap : 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 du gap, la ligne empiète sur le contenu, mais sans le masquer, le contenu étant au dessus.

Pour des explications détaillées sur les possibilités du multi-colonage en CSS, reportez-vous à la propriété columns.

Évolution de column-rule-width.

La propriété est maintenant décrite également dans le module CSS Gap Decorations afin d'étendre ses possibilités aux grilles et aux flex-box.

C'est tout récent. Nous compléterons cette page quand les navigateurs commenceront à implémenter cette propriété.

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).

• column-rule-width: thin;

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

• column-rule-width: thick;

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

• 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.

• 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 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, et la propriété column-rule-width est bien reconnue.

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

1

QQ Browser

1

Opéra Mobile

1

Firefox

1

Chrome

1

Safari

Edge

1

Opéra

1

Chrome pour Androïd

1

Safari sur IOS

Samsung Internet

1

UC Browser pour Androïd

1

Androïd Brower

1

Firefox pour Androïd

1

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 :