Column-rule-color - Propriété CSS

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

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

• color est une couleur définie par l'une des syntaxes reconnues par CSS. Voir Les couleurs.
• La syntaxe peut être répétées en séparant les valeurs par un espace.

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

column-rule-color définit la couleur des lignes de séparation entre les colonnes (rule) dans le cas d'une mise en page sur plusieurs colonnes.
Remarque : les colonnes des tableaux ne sont pas concernées par cette propriété.

La description de la propriété column-rule-color a été transféré dans le module transversal CSS Gap Decorations. Dès que les navigateurs auront implémenté cette possibilité, la propriété s'appliquera aussi bien aux conteneur multi-colonnes qu'aux conteneurs grille ou aux conteneurs flex.

Pour une description plus générale des paramètres de la ligne de séparation entre les colonnes, reportez-vous à la propriété résumée column-rule. Et pour une présentation générale des possibilités de mise en colonnes, voyez la page columns. Pour une synthèse sur les filets, voyez la page sur rule.

Valeurs pour column-rule-color.

• column-rule-color: currentcolor;

  La couleur du trait de séparation des colonnes sera la même que celle du texte, pour l'élément concerné.

  Texte d'exemple. En typographie, un filet est un trait d'épaisseur variable qui accompagne les éléments de texte ou les images pour les mettre en valeur et les différencier, pour séparer des colonnes par exemple.
  column-rule-color:currentcolor;
• column-rule-color: transparent;

  Le trait de séparation des colonnes sera transparent, c'est à dire invisible. Étant donné que les traits de séparation ne repousse pas les autres éléments, tout se passe comme s'il n'y avait pas de trait.

  Texte d'exemple. En typographie, un filet est un trait d'épaisseur variable qui accompagne les éléments de texte ou les images pour les mettre en valeur et les différencier, pour séparer des colonnes par exemple.
  column-rule-color:transparent;
• column-rule-color: #ff8018;

  L'expression d'une couleur dans une des syntaxes reconnues par CSS : code hexadécimal, nom de couleur, l'une des nombreuses fonctions de CSS, etc.

  Reportez vous pages suivantes pour plus de précisions : Les couleurs, rgb() ou rgba(), hsl() ou hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().

  Texte d'exemple. En typographie, un filet est un trait d'épaisseur variable qui accompagne les éléments de texte ou les images pour les mettre en valeur et les différencier, pour séparer des colonnes par exemple.
  column-rule-color:#ff8018;
• column-rule-color: blue red green; ⚠ column-rule-color: repeat(4, blue red); ⚠

  Plusieurs couleurs spécifiées. Elles s'appliquent dans l'ordre aux différents traits de séparation. S'il y a davantage de traits de séparation que de couleurs, la liste est reprise depuis le début.
  Il est possible également d'utiliser la fonction repeat() si le nombre de traits de séparation est important.

  Cette possibilité n'est pas encore prises en charge par Firefox  .

  Texte d'exemple. En typographie, un filet est un trait d'épaisseur variable qui accompagne les éléments de texte ou les images pour les mettre en valeur et les différencier, pour séparer des colonnes par exemple.
  column-rule-color:blue red;
• column-rule-color: initial; (currentcolor) column-rule-color: inherit; column-rule-color: revert; column-rule-color: revertLayer; column-rule-color: unset;

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

Exemple d'animation de column-rule-color.

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

(1) Texte en provenance de Wikipedia

Compatibilité des navigateurs avec column-rule-color.

Les mises en page sur plusieurs colonnes sont à peu près bien prises en charge par les navigateurs actuels. On voit cependant sur le tableau ci-dessous qu'il reste des incompatibilités. Cependant la propriété column-rule-color est bien reconnue pour les conteneurs en multi-colonnes, pas encore pour les grilles ou pour 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-color

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

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

  Introduction des mises en page multi-colonnes et des propriétés qui s'y rapportent, comme column-rule-color.
  

  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-color 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 en colonnes.

Les mises en page multi-colonnes sont décrites dans la spécification CSS Multi-column Layout Module (Module CSS - Mise en page multi-colonnes). La propriété column-rule-color est référencée dans ce module, ainsi que les termes ci-dessous :

Propriétés :