column-rule-width

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-width permet de définir la largeur du trait tracé entre les colonnes lorsqu'on utilise une disposition en colonnes.

Exemple interactif

Syntaxe

css
/* 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.

Définition formelle

Valeur initialemedium
Applicabilitééléments sur plusieurs colonnes
Héritéenon
Valeur calculéeune longueur absolue ou 0 si column-rule-style vaut none ou hidden
Type d'animationune longueur

Syntaxe formelle

column-rule-width = 
  <line-width>  

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

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
# crw

Compatibilité des navigateurs

BCD tables only load in the browser