The column-rule-color property sets the color of the line drawn between columns in a multi-column layout. It is the color longhand of the column-rule shorthand.
The initial value is currentColor. Color alone does not draw a line—you still need a visible column-rule-style (not none) and usually a column-rule-width plus column-gap. The property is not inherited.
Standard-track.
Single-color column-rule-color has been widely available since 2017. Comma-separated lists and repeat() for different gutter colors are newer gap-decoration features with limited support—prefer one color for production.
Syntax
CSS Syntax
syntax.css
column-rule-color:<color> | initial | inherit;
Use any valid CSS color. Named colors, hex, rgb(), hsl(), currentColor, and transparent all work.
Set column-rule-color to the color you want—or use the column-rule shorthand if you are setting all three at once.
Piece
Required?
Role
column-rule-style
Yes (to show a line)
Without a visible style, color has nothing to paint
column-rule-width
Optional
Defaults to medium
column-rule-color
Optional
Defaults to currentColor
Try it
Live Preview
Style and width stay fixed. Change only the rule color.
Scaffold uses solid 3px style/width. currentColor follows the demo text color (violet).
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-color: blue
Code
CSS Examples
Each snippet keeps only what column-rule-color needs. Use Try It Yourself for a live editor.
Example 1 — Named Color
Color a solid column divider with the keyword blue.
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 and a width draw the line.
Set only the color.column-rule-color: blue paints that line blue.
Gap for space.column-gap leaves room for the divider in 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, solid style, and width stay the same.
Swap the color format.#e11d48 is a hex color instead of a keyword.
Any <color> works.rgb(), hsl(), and var(--brand) follow the same pattern.
Longhand benefit. You change color without rewriting width or style.
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
Set text color.color: purple updates the computed text color.
Use the default keyword.currentColor is the initial value of column-rule-color.
Rule follows text. The divider uses the same purple as the words.
Theme tip. Change color once and both text and rule stay in sync.
Edge Cases & Pitfalls
If the color seems missing, check style and contrast first.
style
Color needs a visible style
With column-rule-style: none (the default), no line is drawn. Set solid, dashed, or another style before judging the color.
short
Shorthand can reset color
Writing column-rule after a longhand resets width, style, and color together. Put column-rule-color after the shorthand when you need a color override.
contrast
Low contrast hides the rule
A light gray rule on a white page is easy to miss. Use enough contrast when teaching or debugging.
transparent
transparent is still a color
The style and width remain; you just cannot see the paint. Prefer none on style if you want no rule at all.
list
Multiple colors are not Baseline yet
Comma-separated colors and repeat() come from newer gap-decoration specs. Stick to one color for reliable support.
Compatibility
Browser Support
column-rule-color is a browser layout property. Node.js, Deno, and Bun do not apply it.
Bottom line: Safe for production with a single color value. Treat multi-color lists and repeat() as progressive enhancement only.
Remember
Key Takeaways
Role: color longhand for the multi-column divider.
Default:currentColor follows the text color.
Needs style: pair with a visible column-rule-style.
Shorthand: use column-rule when setting width, style, and color together.
One line:column-rule-color paints the column divider; give it a visible style first, then set any CSS color.
Frequently Asked Questions
column-rule-color sets the color of the line drawn between columns in a multi-column layout. It is the color longhand of the column-rule shorthand.
The initial value is currentColor, which uses the element's computed text color for the rule.
Color alone is not enough. column-rule-style must be a visible style such as solid or dashed, and you usually want a non-zero column-rule-width and column-gap.
column-rule sets width, style, and color together. column-rule-color changes only the color without resetting the other two longhands.
Any valid CSS color: named colors, hex, rgb(), hsl(), currentColor, transparent, and var() custom properties.
Chrome 50+, Firefox 52+, Safari 9+, Edge 12+, and IE 10+. It is a browser layout property, not a Node.js feature.
