CSS - column-rule-color

The column-rule-color CSS property lets you set the color of the "rule" or line drawn between columns in multi-column layouts.

Example

#header {
  column-rule-color: blue;
}

Syntax  

column-rule-color: red;
column-rule-color: rgb(192, 56, 78);
column-rule-color: transparent;
column-rule-color: hsla(0, 100%, 50%, 0.6);

/* Global values */
column-rule-color: inherit;
column-rule-color: initial;
column-rule-color: unset;

Values

<color>
Is a <color> value representing the color of the rule separating columns.

Formal syntax

<color>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<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

where
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

Description  

The column-rule-color CSS property lets you set the color of the "rule" or line drawn between columns in multi-column layouts.

Initial valuecurrentColor
Applies tomulticol elements
Inheritedno
Mediavisual
Computed valueIf the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
Animatableyes, as a color
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit 3.5 (1.9.1)-moz 10 11.10 3.0 (522)-webkit
Unprefixed 50.0        
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? ? (Yes) ? ? ? ?
Unprefixed No support 50.0         50.0

Specifications  

Specification Status Comment
CSS Multi-column Layout Module
The definition of 'column-rule-color' in that specification.
Candidate Recommendation  

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/column-rule-color