The column-rule-width property controls how thick the divider line is between columns in a multi-column layout.
Line thickness.
Part of column-rule.
Browser default.
thin, medium, thick.
px, em, rem.
Stronger separation.
The column-rule-width CSS property specifies the width of the rule (line) between columns in a multi-column layout. It helps enhance visual separation between columns, making content more readable and aesthetically pleasing.
Use it alongside column-rule-style and optionally column-rule-color on a container with column-count or column-width. Length values like px, em, and rem give precise control; keywords like thin and thick match familiar border-width behavior.
Width alone does not create a visible rule — set column-rule-style to solid (or another style) and ensure you have column-gap space between columns.
The syntax for column-rule-width accepts keyword or length values:
selector {
column-rule-width: value;
}.columns {
column-count: 3;
column-rule-width: 5px;
column-rule-style: solid;
column-rule-color: black;
}Here, value can be a length such as px, em, rem, or a keyword like thin, medium, or thick.
medium.border-width.none column-rule-style for a visible line.column-rule shorthand: column-rule: 5px solid black;.column-gap so the line does not feel cramped.| Question | Answer |
|---|---|
| Initial value | medium |
| Applies to | Multi-column containers |
| Inherited | No |
| Animatable | No |
| Common use | 1px–5px solid dividers between text columns |
The column-rule-width property accepts border-width keywords and length values.
| Value | Description |
|---|---|
thin | A thin rule width. |
medium | A medium rule width (default). |
thick | A thick rule width. |
| length | A specific width value, such as 2px, 0.1em, 0.15rem, etc. |
| Property | Controls |
|---|---|
column-rule-width | Thickness of the divider line (this property) |
column-rule-style | Line style (solid, dashed, none, etc.) |
column-rule-color | Line color |
column-rule | Shorthand for all three |
Each mini layout uses a solid black rule with a different column-rule-width — 1px, 3px, and 5px.
Try a 5px rule, thin and thick keywords, and a responsive em-based width.
Start with the reference example — a 5px solid black column rule on three columns.
Define a rule width of 5px between three columns with solid black style.
<style>
.columns {
column-count: 3;
column-rule-width: 5px;
column-rule-style: solid;
column-rule-color: black;
}
</style>
<div class="columns">...</div>column-rule-width: 5px makes each divider noticeably thicker than a default 1px border-style line.
Use thin and thick keywords for quick, browser-defined rule thicknesses.
Apply the thin keyword for a lightweight column separator.
.thin-rule {
column-count: 2;
column-gap: 2rem;
column-rule-width: thin;
column-rule-style: solid;
column-rule-color: #64748b;
}thin maps to a browser-defined narrow width, similar to border-width: thin.
Use thick for a bold column divider without specifying pixels.
.thick-rule {
column-count: 2;
column-gap: 2.5rem;
column-rule-width: thick;
column-rule-style: solid;
column-rule-color: #1e293b;
}thick gives a bolder separator — useful for magazine-style layouts with strong column breaks.
Use em so the rule scales with the container’s font size.
.responsive-rule {
font-size: 1rem;
column-count: 3;
column-gap: 1.5em;
column-rule-width: 0.1em;
column-rule-style: solid;
column-rule-color: #94a3b8;
}0.1em keeps the divider proportional to text size — helpful for responsive typography.
column-rule-width WorksSet column-rule-style to a visible style like solid.
Choose a keyword or length such as 5px or thin.
The divider in each column gap uses your specified width.
Columns are separated with a rule at exactly the thickness you chose.
The column-rule-width property is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera.
All major browsers support column-rule-width as part of the Multi-column Layout module.
Bottom line: Use column-rule-width freely for multi-column divider thickness. Prefer px or rem for consistent cross-browser sizing.
The column-rule-width property is a useful tool for creating visually appealing multi-column layouts. By customizing the width of the rule between columns, you can enhance the readability and design of your content.
Experiment with different widths and see how this property can improve the look and feel of your web projects.
column-rule-style: solid for clarityrem or em for responsive rule scalingcolumn-gap when using thicker rulesnonemedium for pixel-perfect designs across browserscolumn-rule-width with column-gapcolumn-rule-widthUse these points when sizing column divider lines.
Line thickness.
PurposeBrowser default.
Defaultthin, medium, thick.
Valuespx, em, rem.
TipPart of column-rule.
SyntaxOpen the HTML editor, set column-rule-width: 5px with style and color, and preview sized column dividers.
5 people found this page helpful