CSS column-rule-width Property

The column-rule-width property controls the thickness of the rule drawn between the columns of a multi-column element. In a layout that uses multiple columns, the rule appears between every adjacent pair of columns inside the same generating box; adjusting the rule width changes how bold or subtle that separator looks without changing the number of columns or their computed widths. Because it only affects the visible separator, it is often used purely for visual rhythm and hierarchy - for example, to make columns read as a single unit or to clearly delineate separate streams of content.

This property is intended to be used together with the other column-rule properties that determine the rule’s overall appearance: the rule’s stroke pattern comes from column-rule-style and its color from column-rule-color, and the three can also be set together via the shorthand column-rule. When you change the width, the visual weight of the rule changes immediately; combining a heavier width with a strong color or solid style produces a much stronger divider than a light width paired with a subtle color or dotted style.

From a rendering and layout perspective, the rule is painted in the inter-column gutter (the area between columns) and does not alter the computed widths of the columns themselves. It is repeated for every gap inside the same multicolumn container and is normally clipped to the fragment boxes created by column breaks and other layout constraints. Because the rule is part of the painting phase, very thin rules may appear as hairlines on high-DPI displays while thick rules may visually intrude toward column content if the gap is narrow, so designers should balance rule width against the column-gap.

In practical use, you’ll often adjust column-rule-width to improve legibility or to create a specific editorial aesthetic - for instance, a magazine-like layout with bold separators versus a subtle newspaper-style layout with faint rules. Be aware that rules will not continue across elements that disrupt the column flow: elements that span the full measure (created with column-span) or other forced breaks will interrupt the rule rendering. Finally, consider how the rule interacts with backgrounds, stacking contexts and printing: a rule that looks crisp on screen may need slight adjustments for print output or when layered over complex backgrounds.