Our volunteers haven't translated this article into Tiếng Việt yet. Join us and help get the job done!
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 | WindowTextwhere
<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 |
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 |