column-rule-color
The column-rule-color
CSS property sets the color of the line drawn between columns in a multi-column layout.
Try it
Syntax
css
/* <color> values */
column-rule-color: red;
column-rule-color: rgb(192 56 78);
column-rule-color: transparent;
column-rule-color: hsl(0 100% 50% / 0.6);
/* Global values */
column-rule-color: inherit;
column-rule-color: initial;
column-rule-color: revert;
column-rule-color: revert-layer;
column-rule-color: unset;
The column-rule-color
property is specified as a single <color>
value.
Values
<color>
-
The color of the rule that separates columns.
Formal definition
Initial value | currentcolor |
---|---|
Applies to | multicol elements |
Inherited | no |
Computed value | computed color |
Animation type | a color |
Formal syntax
column-rule-color =
<color>
Examples
Setting a blue column rule
HTML
html
<p>
This is a bunch of text split into three columns. The `column-rule-color`
property is used to change the color of the line that is drawn between
columns. Don't you think that's wonderful?
</p>
CSS
css
p {
column-count: 3;
column-rule-style: solid;
column-rule-color: blue;
}
Result
Specifications
Specification |
---|
CSS Multi-column Layout Module Level 1 # crc |
Browser compatibility
BCD tables only load in the browser
See also
- The
<color>
data type - Other color-related properties:
color
,background-color
,border-color
,outline-color
,text-decoration-color
,text-emphasis-color
,text-shadow
, andcaret-color
- Applying color to HTML elements using CSS