column-rule

Valeurs

• 1px solid #ccc – un trait gris fin et plein.
• 2px dashed – en tirets, de la couleur du texte (currentcolor).
• Les parties séparées : column-rule-width, column-rule-style, column-rule-color.

Valeur initiale : medium none currentcolor. Héritée : non. S’applique à : les éléments à colonnes (columns, column-count).

Exemples

Deux colonnes séparées par un trait fin :

<div class="article">
  <p>Le premier paragraphe dans la colonne de gauche. Le trait entre les colonnes se trouve exactement au milieu de l’écart.</p>
  <p>Le deuxième paragraphe. Le trait ne réduit pas la largeur des colonnes, car il n’occupe aucune place.</p>
</div>

.article {
  column-count: 2;
  column-gap: 32px;
  column-rule: 1px solid #90a4ae;
  max-width: 460px;
}
.article p { margin: 0 0 8px; }

Points d’attention

• Sans style (solid, dashed…), le trait n’est pas dessiné – le style par défaut est none, comme pour une bordure.
• Un trait plus large que l’écart entre les colonnes ne s’adapte pas – il empiète sur le texte des colonnes. Donnez à l’écart au moins la largeur du trait.
• Le raccourci remet les parties non indiquées à leur valeur initiale – column-rule: dashed remet l’épaisseur à medium et la couleur à celle du texte.

Prise en charge par les navigateurs

Baseline – largement disponible : dans tous les navigateurs courants depuis mars 2017, considéré comme largement disponible depuis septembre 2019. Depuis la version : Chrome 50, Firefox 52, Safari 9. État : octobre 2026 (MDN browser-compat-data).

Voir aussi :
columns
column-count
border-style
gap
border