column-rule

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 = 
  <'column-rule-width'>  ||
  <'column-rule-style'>  ||
  <'column-rule-color'>  

<column-rule-width> = 
  <line-width>  

<column-rule-style> = 
  <line-style>  

<column-rule-color> = 
  <color>  

<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