CSS column-rule-color property sets the color of the column rule in a multi-column layout. A column rule is a vertical line that separates adjacent columns in a multi-column layout.
The color of the column rule can be set using any valid CSS color format such as ‘color name’, ‘HEX’, ‘RGB’, ‘HSL’, etc.
The example below sets a ‘red’ color column rule. Try it out to see how it works:
Example:
div{
column-count: 3;
column-rule-style: solid;
column-rule-color: red;
}
Set rule color using ‘HEX’ color format:
Example:
div{
column-count: 3;
column-rule-style: solid;
column-rule-color: #033dfc;
}
CSS Syntax
The column-rule-color property has the following syntax:
column-rule-color: color|initial|inherit;
Property Values
The column-rule-color property accepts the following values:
| color | Specifies the color of the column rule. It can be any valid CSS color. The default value is the current color of the element. |
| initial | Sets the column-rule-color to its default value(current color of the element). |
| inherit | Inherits the column-rule-color property from the parent element. |
General Info
| Default Value | The current color of the element. |
| Inherited | No |
| JavaScript Usage | element.style.columnRuleColor = “red” |
