The rule is painted in the middle of the column-gap. It does not change the gap size. The initial style is none, so you need a visible style (such as solid) to see a line. It applies to multicol containers and is not inherited.
Standard-track.
Classic single-value column-rule (width, style, color) has been widely available since 2017. Comma-separated lists and repeat() for multiple different rules are newer gap-decoration features with limited support—prefer one rule style for production.
Set column-gap so the rule has room to sit between columns.
Add column-rule with at least a style, such as 2px solid blue.
Use the longhands only when you need to change width, style, or color alone later.
Piece
Required?
Role
Style
Yes (to show a line)
Without it, the rule stays none and invisible
Width
Optional
Defaults to medium if omitted
Color
Optional
Defaults to currentColor if omitted
column-gap
Recommended
Gives the rule space; the rule does not create the gap
Try it
Live Preview
Three columns with a fixed gap. Change only the rule shorthand.
The rule sits in the middle of the column-gap. Style none draws nothing.
Result
London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
column-rule: 2px solid
Code
CSS Examples
Each snippet keeps only what column-rule needs. Use Try It Yourself for a live editor.
Example 1 — Solid Column Rule
Draw a solid divider between three text columns.
CSS
<style>
p {
column-count: 3;
column-gap: 1.5rem;
column-rule: 2px solid blue;
}
</style>
<p>
London. Michaelmas term lately over…
</p>
London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
How It Works
Create columns.column-count: 3 builds a multicol box.
Leave a gutter.column-gap spaces the columns so the rule has room.
One shorthand.column-rule: 2px solid blue sets width, style, and color.
Style makes it visible. Without solid (or another line style), the initial none draws nothing.
Example 2 — Dashed Column Rule
Use a softer dashed divider. Only the style keyword changes.
CSS
<style>
p {
column-count: 3;
column-gap: 1.5rem;
column-rule: 2px dashed blue;
}
</style>
<p>
London. Michaelmas term lately over…
</p>
London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
How It Works
Same scaffold. Still three columns and a gap.
Change the style.dashed replaces solid in the shorthand.
Same width and color. The line is still 2px and blue—only the pattern changed.
Try dotted next. Swap in dotted the same way for a lighter divider.
Example 3 — Width, Style, and Color
Combine all three pieces in any order for a thicker colored rule.
CSS
<style>
p {
column-count: 3;
column-gap: 1.5rem;
column-rule: 4px solid teal;
}
</style>
<p>
London. Michaelmas term lately over…
</p>
London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
How It Works
Order is flexible.4px solid teal and solid teal 4px mean the same thing.
Width thickens the line.4px is easier to see than a thin hairline.
Color is optional. Omit it to use currentColor (the text color).
Longhands later. Prefer this shorthand first; split to longhands only when one part needs its own rule.
Edge Cases & Pitfalls
If the rule is missing, check style and gap first.
none
Style defaults to invisible
The initial style is none. Setting only a width or color does not draw a line. Include solid, dashed, or another visible style.
gap
Rule does not create the gap
column-rule paints inside column-gap. A tiny or zero gap can make a thick rule look cramped or clipped. Size the gap separately.
border
Not the same as border
A border wraps the outer box. This property only draws between columns inside a multicol container.
double
double needs enough width
Two lines need space. Use something like 6px double; a 1px double often looks like a single line.
list
Multiple rules are not Baseline yet
Comma-separated lists and repeat() for different gutters come from newer gap-decoration specs. Stick to one column-rule value for reliable support.
Compatibility
Browser Support
column-rule is a browser layout property. Node.js, Deno, and Bun do not apply it.
Bottom line: Safe for production with a single width/style/color value. Treat multi-value and repeat() gap decorations as progressive enhancement only.
Remember
Key Takeaways
Role: shorthand for the divider between multi-column tracks.
Style first: initial style is none. Include a visible line style.
Gap: the rule sits in column-gap; it does not resize the gap.
Longhands: width, style, and color when you need one part alone.
One line:column-rule draws the divider between columns; include a visible style and enough column-gap for it to sit in.
Frequently Asked Questions
column-rule is a shorthand that sets the width, style, and color of the line drawn between columns in a multi-column layout. It paints in the middle of the column gap.
The initial style is none. You need a visible style such as solid, dashed, or dotted. Width and color alone do not draw a line.
No. The rule is centered in the gutter. A thick rule can look wider than the gap, but it does not change the gap size.
It sets column-rule-width, column-rule-style, and column-rule-color in one declaration.
No. A border wraps the element's outer edge. column-rule only appears between columns inside a multicol container.
Chrome 50+, Firefox 52+, Safari 9+, Edge 12+, and IE 10+. It is a browser layout property, not a Node.js feature.
