column-rule-width

Baseline Widely available

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.

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 detype <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;

La propriété column-rule-width est définie grâce à une valeur de type <'border-width'>.

Valeurs

<'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 sera é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	une longueur absolue ou `0` si `column-rule-style` vaut `none` ou `hidden`
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,∞]>  |
  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

Specification
CSS Multi-column Layout Module Level 1 # crw

Compatibilité des navigateurs

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 1 févr. 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content