Column-rule-style - Propriété CSS

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

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

column-rule-style définit le style de la ligne de séparation des colonnes. On retrouve les mêmes possibilités que pour le style des bordures.
Remarque : cette propriété ne concerne que les colonnes d'une mise en page multi-colonnes. Les colonnes des tableaux et des grilles ne sont pas concernées.

Reportez-vous à la page column-rule pour un aperçu de tous les paramètres concernant les lignes de séparation, et à la page columns pour une présentation générale des mises en pages en colonnes par CSS.

Évolution de column-rule-style.

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 à l'implémenter.

Valeurs pour column-rule-style.

• column-rule-style: none;

  Valeur par défaut. Pas de ligne de séparation entre les colonnes.

• column-rule-style: hidden;

  Ligne de séparation invisible. Dans la mesure où l'épaisseur de la ligne de séparation ne change pas la largeur de la gouttière (gap), cette valeur est équivalente à none.

• column-rule-style: solid;

  Plusieurs styles de traits sont disponibles. Ils correspondent aux valeurs suivantes :

  solid
  Un trait simple

  double
  Un trait double

  dotted
  Une succession de points

  dashed
  Une succession de tirets

  groove
  Une ligne avec effet 3D : rainure ⁽¹⁾

  ridge
  Une ligne avec effet 3D : bourrelet ⁽¹⁾

  inset
  Une ligne avec effet 3D : incrustation ⁽²⁾

  outset
  Une ligne avec effet 3D : relief ⁽²⁾

  (1) Les effets 3D ne sont visibles que si l'épaisseur de la ligne est de au moins 3 pixels. Sur nos exemples, l'épaisseur est de 5 pixels.

  (2) Les effets inset et outset sont mal adaptés aux lignes de séparation de colonnes. En effet, ces effets nécessitent des lignes perpendiculaires, comme dans une bordure autour de l'élément. Appliqués à une simple ligne verticale, ils provoquent seulement un éclaircissement ou un assombrissement de la couleur de la ligne.

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

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

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

(1) Texte issu de Wikipedia.

Compatibilité des navigateurs avec column-rule-style.

Les mises en page multi-colonnes sont relativement bien prises en charge par les navigateurs récents, même s'il reste des incompatibilités, comme on peut le voir sur le tableau ci-dessous. Cependant la propriété column-rule-style est bien reconnue dans le cadre d'une mise en page en 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.

1

Mise en page
multi colonnes

2

Propriété
column-rule-style

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

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

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

  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-style est maintenant décrite 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.

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-style est référencée dans ce module, ainsi que les termes ci-dessous :

Propriétés :