Layout
column-rule
column-rule sets the line drawn between the columns of a multi-column layout. It is a shorthand for column-rule-width, column-rule-style and column-rule-color.
Syntax
<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>Preview
Shorthand breakdown
column-ruleCode
.box {
column-count: 2;
column-gap: 2em;
column-rule: 2px solid #88d1c7;
}Controls
About
Values
As with border, write the width, style and color in any order (column-rule: 2px dashed #4a86cb). Parts you leave out go back to their initial values. The style starts as none, so without a style there is no line. The width starts as medium (3px) and the color as currentcolor (the text color).
The styles are the same as for border-style, but they are drawn as in collapsed table borders (border-collapse: collapse): inset looks like ridge and outset like groove.
Where the line goes and how wide it is
- The line runs down the middle of the gap between columns (
column-gap), from the top to the bottom of the box's content area (inside the padding). - The line takes up no space. Making it wider doesn't move or narrow the columns, and a line wider than the gap overlaps the text in the columns (the text is drawn on top).
- Lines are only drawn between two columns that both have content.
The preview on this page uses helper declarations to split the sample text into two columns with column-count: 2 and to widen the gap with column-gap: 2em so the line is easy to see.