CSS column-rule Property

The column-rule property controls the visual divider drawn between columns inside an element that uses a multi-column layout. It acts as a shorthand for the individual aspects of that divider - column-rule-width, column-rule-style, and column-rule-color - allowing you to set thickness, rendering style, and color together. Conceptually, it is a decorative box-decoration applied where columns are separated, and is only meaningful when the element actually establishes multiple columns (for example via properties such as column-count or column-width).

Visually, the rule is painted in the inter-column area and typically appears centered within the space determined by the layout’s gap; that gap is controlled by the column-gap property. Because the rule occupies the inter-column region, designers should consider how it interacts with column backgrounds and any decorative strokes - it is intended as a clear separator to improve legibility and organization in multi-column content. Using the rule alongside background or box-decoration adjustments can create strong visual columns without changing the flow of text.

Interaction with content that spans columns is an important behavior to keep in mind: elements that span across multiple columns will interrupt or omit the rule where they occupy that space, so the divider will not be drawn across spanned content (see column-span). Similarly, the rule follows the flow of the columnized element across fragmentation boundaries - it’s tied to the multi-column formatting context rather than to page or region edges of sibling boxes.

From a practical perspective, column-rule is useful for typographic and magazine-style layouts where visual separation is needed without additional markup. Because it’s a shorthand for the three underlying rule properties, you can choose to manage each aspect independently when you need fine-grained control (width, style, color) or set them together for convenience. Keep in mind that the rule’s appearance is determined by the multi-column environment around it - adjusting the column count, width, or gap will influence how prominent or subtle the divider appears.