Column-rule - Propriété CSS

Schéma de la syntaxe de column-rule.

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

• column-rule est une propriété résumée qui regroupe column-rule-width, column-rule-style et column-rule-color. Sur le schéma ces termes correspondent aux syntaxes des propriétés correspondantes. Reportez-vous à leurs pages respectives.
• La syntaxe peut être répétée plusieurs fois avec une virgule comme séparateur.

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, un conteneur grille, ou tout autre conteneur faisant apparaître des colonnes. Bien que cette dernière possibilité ne soit pour le moment gérée uniquement par Chrome   ou Edge  .

column-rule est une propriété résumée qui regroupe plusieurs informations :

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  .

Vous pouvez consulter la page sur rule pour une synthèse de tout ce qui concerne les filets.

Valeurs pour column-rule.

• column-rule: 5px dashed red;

  column-rule accepte les valeurs pour l'épaisseur, le style et la couleur des filets de séparation des colonnes, dans un conteneur grille, flex-box multi-colonnes ou tout autre conteneur qui accepte plusieurs colonnes.

  Si une valeur n'est pas précisée, elle est fixée à la valeur par défaut. Attention ! La valeur par défaut de column-rule-style est none. Il en résulte que la valeur pour le style est obligatoire, sans quoi le trait ne sera pas visible.

  A

  B

  C

  D

  E

  F

  G

  H

  I

  J

  K

  L

  M

  N

  O

  P

  Q

  R

  S

  T

  U

  V

  W

  X

  Y

  Z
  column-rule:5px dashed red;
• column-rule: 5px dotted red, solid blue; column-rule: repeat(2,5px double red), solid;

  Il est possible de répéter plusieurs jeux de valeurs en les séparant par une virgule. La fonction repeat() est acceptée. Dans l'exemple ci-dessous on a deux traits successifs en rouge, double de 5 pixels, suivis d'un trait solide, en noir et en épaisseur médium. Ce schéma est repris jusqu'à la fin des filets.

  A

  B

  C

  D

  E

  F

  G

  H

  I

  J

  K

  L

  M

  N

  O

  P

  Q

  R

  S

  T

  U

  V

  W

  X

  Y

  Z
  column-rule:repeat(2,5px double red),solid;
• column-rule: initial; column-rule: inherit; column-rule: revert; column-rule: revert-layer; column-rule: revert-rule; column-rule: unset;

  column-rule-width: initial; (medium) column-rule-width: inherit; column-rule-width: revert; column-rule-width: revert-layer; column-rule-width: revert-rule; column-rule-width: unset;

  column-rule-style: initial; (none) column-rule-style: inherit; column-rule-style: revert; column-rule-style: revert-layer; column-rule-style: revert-rule; column-rule-style: unset;

  column-rule-color: initial; (currentcolor) column-rule-color: inherit; column-rule-color: revert; column-rule-color: revert-layer; column-rule-color: revert-rule; column-rule-color: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, revert-rule, unset.

Exemples d'utilisation de la propriété column-rule.

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. Les colonnes suivantes du tableau (2 à 5) ne concernent que l'utilisation des propriétés sur un conteneur multi-colonnes. En ce qui concerne les conteneurs grille ou flex-box, la compatibilité est moindre : seuls Chrome   et Edge   traitent correctement les propriétés.

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.

1

Mise en page
multi colonnes

2

Propriété
column-rule

3

Propriété
column-rule-width

4

Propriété
column-rule-style

5

Propriété
column-rule-color

Estimation de la prise en charge globale.

18%

96%

96%

96%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

1

Opéra Mobile

1

QQ Browser

1

Baidu Browser

1

Safari

Safari sur IOS

Opéra

1

Chrome

1

Edge

1

Firefox

1

Chrome pour Androïd

1

Samsung Internet

1

Androïd Brower

1

Firefox pour Androïd

1

KaiOS Browser

1

Opéra mini

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

Caniuse

Caniuse

Caniuse

Caniuse

Caniuse

Histoire de la propriété column-rule.

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

  Ce module reprend les règles qui définissent les filets entre les colonnes dans un conteneur multi-colonnes (grille, flex-box, etc.). Il étend ces possibilités aux filets entre les éléments disposés sur plusieurs lignes, ce qui permet d'utiliser ces fonctionnalités sur d'autres types de conteneurs. Plusieurs propriétés définissent comment ces filets doivent être dessinés.

  Concernant column-rule Transfert de la description de la propriété column-rule dans ce module.
  

  17 Avril 2025

  Document de travail.

  

  

  

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

  Cette spécification décrit la mise en page sur plusieurs colonnes. Il suffit de définir le nombre de colonnes sur le conteneur, et le contenu se disposera sur le nombre de colonnes indiqué. Bien entendu d'autres propriétés permettent d'agir plus finement sur les conteneur multi-colonnes.
  Cette spécification définit également des propriétés concernant l'espace entre les colonnes et le trait de séparation éventuel.

  Concernant column-rule 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ée column-rule.
  

  23 Juin 1999

  Document de travail.

  

  17 Décembre 2009

  Candidat à 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 Module CSS - Mise en page multi-colonnes (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 :

Propriétés :