How to Use the CSS column-rule Property

This article provides an overview of the CSS column-rule property, explaining its syntax, component sub-properties, and practical implementation. You will learn how this property draws visual divider lines between multi-column text layouts, how it interacts with column spacing, and how to effectively use it in responsive web design.

What is the CSS column-rule Property?

The column-rule property in CSS is used in multi-column text layouts to draw a vertical dividing line between adjacent columns. It acts similarly to a standard border property, such as border-left or border-right, but applies specifically to the space separating columns generated by the CSS Multi-column Layout module.

Syntax and Sub-Properties

column-rule is a shorthand property that combines three individual properties into a single declaration:

.container {
  column-rule: <column-rule-width> <column-rule-style> <column-rule-color>;
}

The individual sub-properties include:

  • column-rule-width: Sets the thickness of the line. It accepts standard CSS length units (such as px, em, rem) or keywords like thin, medium, and thick. The default value is medium.
  • column-rule-style: Defines the appearance of the line. It accepts standard border styles such as none, hidden, solid, dashed, dotted, double, groove, ridge, inset, and outset. The default value is none. A style other than none or hidden must be defined for the line to be visible.
  • column-rule-color: Sets the color of the rule using any valid CSS color value (hex, RGB, HSL, or named colors). If omitted, it defaults to the element's currentcolor.

Shorthand Example

.newspaper-layout {
  column-count: 3;
  column-gap: 40px;
  column-rule: 2px solid #ccc;
}

How column-rule Draws Borders Between Columns

Understanding how the browser renders a column rule is key to avoiding layout bugs:

  1. Drawn Only Between Columns: Unlike regular element borders, a column rule never appears on the outer edges (left, right, top, or bottom) of the container. It is only rendered between adjacent columns. If content is not long enough to break into multiple columns, the rule does not render.
  2. Rendered Centered Within column-gap: The column rule is drawn directly in the center of the column-gap.
  3. No Layout Space Consumption: The rule does not push columns apart or consume physical box-model width. If the column-rule-width is thicker than the column-gap, the rule will simply overflow into the adjacent text columns rather than expanding the gap. To prevent text overlap, ensure that your column-gap is always wider than your column-rule-width.
  4. Matches Column Height: The height of the rule matches the height of the columns, extending from the top of the column text down to the bottom.

Complete Practical Example

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .article-columns {
      column-count: 2;
      column-gap: 3rem;
      column-rule: 1px dashed #666666;
      line-height: 1.6;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <div class="article-columns">
    <p>
      Multi-column layouts allow content to flow naturally from one column to 
      the next. Using the column-rule property provides visual separation 
      similar to traditional newspaper print.
    </p>
    <p>
      Because the rule is drawn within the column gap without taking up layout 
      space, it allows designers to add structure without recalculating container 
      widths or positioning manual dividers.
    </p>
  </div>
</body>
</html>