column-rule

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Lorsqu'on utilise une disposition sur plusieurs colonnes, la propriété raccourcie column-rule permet de définir l'affichage d'une ligne droite (aussi appelée « règle ») entre chaque colonne.

Exemple interactif

Cette propriété est une propriété raccourcie qui permet de définir column-rule-width, column-rule-style et column-rule-color (plutôt que d'avoir à les définir une par une, ce qui est plus laborieux).

Note : Cette propriété étant une propriété raccourcie, elle surcharge toutes les déclarations avec les propriétés individuelles écrites avant au sein d'une même règle.

Syntaxe

css
/* Syntaxe avec des mots-clés */
column-rule: dotted;
column-rule: solid blue;
column-rule: solid 8px;
column-rule: thick inset blue;

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

Cette propriété peut être définie avec une, deux ou trois valeurs telles que définies ci-après, dans n'importe quel ordre.

Valeurs

<'column-rule-width'>

Une valeur de longueur (type <length>) ou l'un des mots-clés thin, medium ou thick. Pour plus de détails, voir border-width.

<'column-rule-style'>

Voir border-style pour les différentes valeurs possibles.

<'column-rule-color'>

Une valeur de couleur (type <color>).

Définition formelle

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitééléments sur plusieurs colonnes
Héritéenon
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :

Syntaxe formelle

column-rule = 
  <gap-rule-list>       |
  <auto-gap-rule-list>  

<gap-rule-list> = 
  <gap-rule-or-repeat> [ / <gap-rule-or-repeat> ]*  

<auto-gap-rule-list> = 
  [ [ <gap-rule-or-repeat> ] / ]* <auto-repeat-gap-rule> [ / [ <gap-rule-or-repeat> ] ]*  

<gap-rule-or-repeat> = 
  <gap-rule>         |
  <repeat-gap-rule>  

<auto-repeat-gap-rule> = 
  repeat( auto , [ <gap-rule> ]# )  

<gap-rule> = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<repeat-gap-rule> = 
  repeat( [ <integer [1,∞]> ] , [ <gap-rule> ]# )  

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

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

Exemples

HTML

html
<div id="col_rul">
  <p>column one</p>
  <p>column two</p>
  <p>column three</p>
</div>

CSS

css
#col_rul {
  padding: 0.3em;
  background: gold;
  border: groove 2px gold;
  column-rule: inset 2px gold;
  column-count: 3;
}

Résultat

Spécifications

Specification
CSS Multi-column Layout Module Level 1
# column-rule

Compatibilité des navigateurs

BCD tables only load in the browser