column-rule-color

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

Valeur initiale	`currentcolor`
Applicabilité	éléments sur plusieurs colonnes
Héritée	non
Média	visuel
Valeur calculée	si la valeur est translucide, la valeur calculée est la fonction `rgba()`correspondante. Sinon, la fonction `rgb()`correspondante. Le mot-clé `transparent` devient `rgb(0,0,0)`.
Type d'animation	une couleur
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Valeurs avec un mot-clé */
column-rule-color: red;
column-rule-color: rgb(192, 56, 78);
column-rule-color: transparent;
column-rule-color: hsla(0, 100%, 50%, 0.6);

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

Valeurs

<color>: Une valeur de couleur (type <color>) qui indique la couleur du trait entre les colonnes.

Syntaxe formelle

<color>où 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
où 
<rgb()> = rgb( <rgb-component>#{3} , <alpha-value>? )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> , <alpha-value>? )
<hsla()> = hsla( <hue>, <percentage>, <percentage> , <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
où 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Exemples

CSS

.exemple {
  border: 10px solid #000000;
  
  -moz-columns:3;
  -webkit-columns:3;
  columns:3;

  -moz-column-rule-width: thick;
  -webkit-column-rule-width: thick;
  column-rule-width: thick;

  -moz-column-rule-color: blue;
  -webkit-column-rule-color: blue;
  column-rule-color: blue;

  -moz-column-rule-style: solid;
  -webkit-column-rule-color: solid;
  column-rule-color: solid; 
}

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-color' dans cette spécification.	Candidat au statut de recommandation

Fonctionnalité	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Support simple	(Oui)-webkit 50.0^[1]	(Oui)-webkit (Oui)	3.5 (1.9.1)-moz 52.0 (52.0)^[2]	10	11.10	3.0 (522)-webkit

Fonctionnalité	Android	Webview Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile	Chrome pour Android
Support simple	?	? 50.0^[1]	(Oui)-webkit (Oui)	(Oui) 52.0 (52.0)^[2]	?	?	?	? 50.0^[1]

[1] Non-préfixée à partir de Chrome 50.

[2] Non-préfixée à partir de Gecko 52, les synonymes préfixés sont toujours disponibles.