CSS column-rule property specifies the color, width, and style of a column rule in a multi-column layout. It is a shorthand of the following three properties:
A column rule is a vertical line that separates adjacent columns in a multi-column layout.
The example below sets an 8px wide, dashed, red color vertical column rule for the <div> element:
Example:
div{
column-count: 3;
column-rule: 8px dashed red;
}
If no color is specified, the color of the rule will be same as the text color of the element. See the example below:
Example:
div{
column-count: 3;
color: blue; /* Text color */
column-rule: 8px solid;
}
Note: A column rule does not take up any space. This means, adding a column rule has no effect on the element’s total width or height.
CSS Syntax
The column-rule property has the following syntax:
column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit;
Property Values
The column-rule property accepts the following values:
| column-rule-width | Specifies the thickness(width) of the rule. |
| column-rule-style | Specifies the style of the rule such as ‘solid’, ‘dashed’, ‘dotted’, etc. |
| column-rule-color | Specifies the color of the rule. |
| initial | Sets the column-rule property to its default value. |
| inherit | Inherits the column-rule property from the parent element. |
General Info
| Default Value | medium solid currentColor |
| Inherited | No |
| JavaScript Usage | element.style.columnRule = “8px solid blue” |
