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.

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

Spécification État Commentaires
CSS Multi-column Layout Module
La définition de 'column-rule-width' dans cette spécification.
Version de travail Définition initiale.
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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
column-rule-widthChrome Support complet 50
Support complet 50
Support complet 1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 52
Support complet 52
Aucun support 3.5 — 74
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Support complet 10Opera Support complet 11.1
Support complet 11.1
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 9
Support complet 9
Support complet 3
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 50
Support complet 50
Support complet ≤37
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 50
Support complet 50
Support complet 18
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 52
Support complet 52
Support complet 4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Opera Android Support complet 11.1
Support complet 11.1
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet 9
Support complet 9
Support complet 1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet 5.0
Support complet 5.0
Support complet 1.0
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-

Légende

Support complet  
Support complet
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.