Column-rule - Propriété CSS
Résumé des caractéristiques de la propriété column-rule
Description de la propriété column-rule.
column-rule définit le trait de séparation entre les colonnes, dans le cas d'une mise en page sur plusieurs colonnes, et, depuis qu'elle est
décrite dans le module CSS Gap Decorations d'un conteneur flex ou un conteneur grille.
C'est une propriété résumée qui regroupe plusieurs informations :
column-rule-width: épaisseur de la ligne de séparation.column-rule-style: style de la ligne de séparation (paramètre obligatoire).column-rule-color: couleur de la ligne de séparation.
↓
column-rule.
Voici l'effet de column-rule dans la cas d'un conteneur grille ou d'un conteneur flex. ⚠ Cela ne marchera que sur Chrome 
ou sur
Edge 
.
column-rule sur un conteneur grille.column-rule sur un conteneur flex.
Vous pouvez consulter la page sur rule pour une synthèse de tout ce qui concerne les filets.
Exemples d'utilisation de la propriété column-rule.
medium pour l'épaisseur du trait
et currentColor pour la couleur.
En effet, comme toutes les propriétés résumées, column-rule initialise toutes les valeurs concernées, en fixant
à leur valeur initiale les paramètres qui ne sont pas spécifiés.
column-gap).
L'esthétique du résultat est probablement critiquable, mais cet exemple montre bien que la largeur du trait de séparation
ne s'ajoute pas à la largeur de la gouttière.
On voit d'autre part que le trait de séparation empiète sur le texte des colonnes, mais tout en restant en arrière de celui-ci. Il n'y a donc pas de risque de masquage du contenu des colonnes par le trait de séparation.
Exemple d'animation de column-rule.
Reportez-vous aux pages sur les propriétés individuelles pour des exemples d'animation.
Exemple interactif avec la propriété column-rule.
Vous voyez ici l'effet de column-rule sur sur un conteneur multi-colonnes et un conteneur grille. Cela marcherait aussi avec un conteneur flex.
⚠ Bien entendu ce simulateur ne fonctionne que sur les navigateurs qui reconnaissent entièrement la propriété column-rule.
Compatibilité des navigateurs avec column-rule.
Les mises en page sur plusieurs colonnes sont relativement bien prises en charge par les navigateurs récents, même s'il subsiste
des non conformités.
La propriété column-rule est quant à elle bien reconnue, tout au moins dans sa syntaxe pour les mises en page en colonnes.
column-rule, qui définit les paramètres des traits de séparation des colonnes pour une mise en page en colonnes.column-rule-width, définissant l'épaisseur du trait de séparation des colonnes, dans le cas d'une mise en page en colonnes.column-rule-style dans le cas d'une mise en page sur plusieurs colonnes.column-rule-color pour définir la couleur des traits de séparation des colonnes.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.
multi colonnes
column-rulecolumn-rule-widthcolumn-rule-stylecolumn-rule-colorNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
Baidu Browser
QQ Browser
Opéra Mobile
Firefox
Chrome
Safari
Edge
Opéra
Chrome pour Androïd
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Histoire de la propriété column-rule.
-
Module CSS - Décoration des espaces - Niveau 1.
Transfert de la description de la propriétécolumn-ruledans ce module.
17 Avril 2025Document de travail.
-
Module CSS - Mise en page multi-colonnes - Niveau 1
Première description des mises en page sur plusieurs colonnes.
Et introduction des propriétés qui s'y rapportent, dont la propriété résuméecolumn-rule.23 Juin 1999Document de travail.17 Décembre 2009Candidat à la recommandation.
Voir aussi, à propos des mises en page en colonnes.
Les mises en page sur plusieurs 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 est expliquée dans ce module. Vous y trouverez également la référence des termes ci-dessous :