column-rule-width

La propriété column-rule-width permet de définir la largeur du trait tracé entre les colonnes lorsqu'on utilise une disposition en colonnes.

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

Syntaxe

/* Valeurs avec un mot-clé */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;

/* Valeurs de longueurs */
/* Type <length>        */
column-rule-width: 1px;
column-rule-width: 2.5em;

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

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

Valeurs

<br-width>

Une valeur de longueur (type <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.

Syntaxe formelle

<'border-width'>

Exemples

CSS

.exemple {
  border: 10px solid #000000;
  columns:3;
  column-rule-width: thick;
  column-rule-color: blue;
  column-rule-style: dashed; 
}

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

Compatibilité des navigateurs