column-rule-style

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-style définit le style de la ligne tracée entre les colonnes dans une mise en page multi-colonnes.

Exemple interactif

column-rule-style: none;

column-rule-style: dotted;

column-rule-style: solid;

column-rule-style: double;

column-rule-style: ridge;
column-rule-color: #8888ff;

<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 de type <'border-style'> */
column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;

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

La propriété column-rule-style avec une valeur unique de type <'border-style'>.

Valeurs

<'border-style'>: Un mot-clé défini comme pour border-style qui permet de définir le style appliqué au trait. Le rendu doit être interprété conformément au modèle d'affaissement des bordures.

Définition formelle

Valeur initiale	`none`
Applicabilité	éléments sur plusieurs colonnes
Héritée	non
Valeur calculée	comme spécifié
Type d'animation	discrète

Syntaxe formelle

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

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

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

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

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

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

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

<integer> = 
  <number-token>

Exemples

Définir une règle de colonne en tirets

HTML

html

<p>
  Ce texte est réparti en trois colonnes. La propriété `column-rule-style` est
  utilisée pour changer le style 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: dashed;
}

Résultat

Spécifications

Specification
CSS Multi-column Layout Module Level 1 # crs

Compatibilité des navigateurs

Voir aussi

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