The column-rule-width property sets the thickness of the line drawn between columns in a multi-column layout. It is the width longhand of the column-rule shorthand.
The initial value is medium. Use thin, medium, thick, or a non-negative length such as 4px. Percentages are invalid. The rule is only paint—it does not change column-gap. You still need a visible column-rule-style. The property is not inherited.
Standard-track.
Single-value column-rule-width has been widely available since 2017. Comma-separated lists and repeat() for different gutter widths are newer gap-decoration features with limited support—prefer one width for production.
Add column-gap at least as wide as the rule when you can.
Set column-rule-width to a keyword or length—or use the column-rule shorthand for width, style, and color together.
Piece
Required?
Role
column-rule-style
Yes (to show a line)
Without a visible style, width has nothing to paint
column-rule-width
Optional
Defaults to medium
column-gap
Recommended
Gives the rule room; width does not create the gap
Try it
Live Preview
Style and color stay fixed. Change only the rule width.
Scaffold uses a solid blue rule and a roomy column-gap so thicker widths stay clear.
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-width: 4px
Code
CSS Examples
Each snippet keeps only what column-rule-width needs. Use Try It Yourself for a live editor.
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.
Make the rule visible.column-rule-style: solid turns the line on.
Set thickness.column-rule-width: thick uses the browser's thick keyword.
Gap for space.column-gap keeps the paint inside the gutter.
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. Columns, gap, style, and color stay the same.
Use a length.4px sets an exact thickness instead of a keyword.
Longhand benefit. You change width without rewriting style or color.
Other units.em and rem also work; percentages do not.
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
Pick thin. The browser maps it to a small line width.
Still needs style. Without solid (or another style), nothing appears.
Compare keywords. Switch to medium or thick to see the step up.
Prefer lengths for design systems. Keywords are handy; pixels give predictable UI chrome.
Edge Cases & Pitfalls
If the line looks wrong, check style and gap before blaming width.
style
Width needs a visible style
With column-rule-style: none, no line is drawn. Set solid or another style before judging thickness.
gap
Width does not create the gap
The rule is paint only. column-gap controls spacing. If the rule is wider than the gap, it can paint behind column content.
%
Percentages are invalid
Use keywords or lengths. A value like 10% is not a valid column-rule-width.
short
Shorthand can reset width
Writing column-rule after a longhand resets width, style, and color together. Put column-rule-width after the shorthand when you need a width override.
list
Multiple widths are not Baseline yet
Comma-separated widths and repeat() come from newer gap-decoration specs. Stick to one width for reliable support.
Compatibility
Browser Support
column-rule-width is a browser layout property. Node.js, Deno, and Bun do not apply it.
Bottom line: Safe for production with a single keyword or length. Treat multi-width lists and repeat() as progressive enhancement only.
Remember
Key Takeaways
Role: width longhand for the multi-column divider.
Default:medium; also use thin, thick, or a length.
Needs style: pair with a visible column-rule-style.
Paint only: does not change column-gap or layout.
One line:column-rule-width sets how thick the column divider is; give it a visible style and enough gap, then use a keyword or length.
Frequently Asked Questions
column-rule-width sets the thickness of the line drawn between columns in a multi-column layout. It is the width longhand of the column-rule shorthand.
The initial value is medium, a browser-defined medium line width similar to border-width keywords.
No. Percentages are invalid. Use thin, medium, thick, or a non-negative length such as 4px or 0.15em.
Width alone does not draw a line. Set column-rule-style to a visible value such as solid. Also keep column-gap at least as wide as the rule when you can.
No. The rule is only paint. column-gap (or gap) controls spacing. If the rule is wider than the gap, it can paint behind column content.
Chrome 50+, Firefox 52+, Safari 9+, Edge 12+, and IE 10+. It is a browser layout property, not a Node.js feature.
