column-rule-style

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.

La propriété column-rule-style permet de définir le style de la ligne tracée entre plusieurs colonnes lorsqu'on utilise une disposition en colonnes.

Exemple interactif

Syntaxe

css

/* Valeurs avec un mot-clé */
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: unset;

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

Valeurs

<br-style>: Un mot-clé (défini comme pour border-style) qui permet de définir le style appliqué au trait. Les épaisseurs résultantes sont calculées avec la même méthode que pour les bordures (cf. collapsing border model).

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> ]+ )

Exemples

CSS

css

.exemple {
  border: 10px solid #000000;

  columns: 3;
  column-rule-width: thick;
  column-rule-color: blue;
  column-rule-style: dashed;
}

HTML

html

<p class="exemple">
  « Mais alors, » pensa Alice, « ne serai-je donc jamais plus vieille que je ne
  le suis maintenant ? D’un côté cela aura ses avantages, ne jamais être une
  vieille femme. Mais alors avoir toujours des leçons à apprendre ! Oh, je
  n’aimerais pas cela du tout. » « Oh ! Alice, petite folle, » se répondit-elle.
  « Comment pourriez-vous apprendre des leçons ici ? Il y a à peine de la place
  pour vous, et il n’y en a pas du tout pour vos livres de leçons. »
</p>

Résultat

Spécifications

Specification
CSS Multi-column Layout Module Level 1 # crs

Compatibilité des navigateurs

BCD tables only load in the browser