column-rule-color

Summary

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

Initial value	`currentColor`
Applies to	multicol elements
Inherited	no
Media	visual
Computed value	If 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)`.
Animatable	yes, as a color
Canonical order	the unique non-ambiguous order defined by the formal grammar

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>

Example

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

Specifications

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

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

column-rule-color

Summary

Syntax

Values

Formal syntax

Example

Specifications

Browser compatibility

Tag Dokumen dan Kontributor