Propriété CSS `column-rule-width`

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2017.

En savoir plus
Voir la compatibilité complète

La propriété CSS column-rule-width définit la largeur de la ligne tracée entre les colonnes dans une mise en page multi-colonnes.

Exemple interactif

column-rule-width: thin;

column-rule-width: medium;

column-rule-width: thick;

column-rule-width: 12px;

<section id="default-example">
  <p id="example-element">
    Londres. Le trimestre de Michaelmas venait de se terminer, et le lord
    chancelier siégeait dans la salle de Lincoln's Inn. Un novembre implacable.
    Tant de boue dans les rues comme si les eaux venaient tout juste de se
    retirer de la surface de la terre, et il ne serait pas étonnant de
    rencontrer un Megalosaurus, quarante pieds de long environ, se dandinant
    comme un lézard éléphantesque en montant Holborn Hill.
  </p>
</section>

#example-element {
  columns: 3;
  column-rule: solid;
  text-align: left;
}

Syntaxe

css

/* Valeurs avec un mot-clé */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;

/* Valeurs de type <length> */
column-rule-width: 1px;
column-rule-width: 2.5em;

/* Valeurs globales */
column-rule-width: inherit;
column-rule-width: initial;
column-rule-width: revert;
column-rule-width: revert-layer;
column-rule-width: unset;

Valeurs

La propriété column-rule-width accepte une liste de valeurs séparées par des virgules, y compris :

<line-width>: Définit la largeur de la ligne, soit comme une longueur (<length>) explicite non négative, soit avec les mots-clés : thin, medium ou thick. La valeur par défaut est medium.
<'border-width'>: Une valeur de longueur (<length>) ou un mot-clé parmi thin, medium ou thick qui décrit l'épaisseur du trait séparant deux colonnes. C'est le type de valeur qui est également utilisé pour la propriété border-width.

Définition formelle

Valeur initiale	`medium`
Applicabilité	éléments sur plusieurs colonnes
Héritée	non
Valeur calculée	the absolute `<length>`, snapped as a line width
Type d'animation	une longueur

Syntaxe formelle

column-rule-width = 
  <line-width-list>       |
  <auto-line-width-list>  

<line-width-list> = 
  <line-width-or-repeat>#  

<auto-line-width-list> = 
  <line-width-or-repeat>#? , <auto-repeat-line-width> , <line-width-or-repeat>#?  

<line-width-or-repeat> = 
  <line-width>         |
  <repeat-line-width>  

<auto-repeat-line-width> = 
  repeat( auto , [ <line-width> ]# )  

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick           

<repeat-line-width> = 
  repeat( [ <integer [1,∞]> ] , [ <line-width> ]# )  

<integer> = 
  <number-token>

Exemples

Définir une règle de colonne épaisse

HTML

html

<p>
  Ce texte est réparti en trois colonnes. La propriété `column-rule-width` est
  utilisée pour changer la largeur de la ligne tracée entre les colonnes. Ne
  trouvez-vous pas cela merveilleux&nbsp;?
</p>

CSS

css

p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: thick;
}

Résultat

Spécifications

Spécification
CSS Multi-column Layout Module Level 1 # crw

Compatibilité des navigateurs

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 11 août 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

Propriété CSS column-rule-width

HTML

CSS

Aider à améliorer MDN

Propriété CSS `column-rule-width`