CSS

CSS

🎯 CSS column-rule-width Property

The column-rule-width CSS property defines the thickness of the vertical separator line between columns in a multi-column layout.

It is used together with column-rule-style and column-rule-color to fully control the appearance of column dividers.

πŸ”Ή Why Use column-rule-width?

  • Benefits

  • Controls the thickness of column separator lines.
  • Improves readability in multi-column layouts.
  • Helps create clean and structured magazine-style designs.
  • Works with column-rule-style and column-rule-color.

🧩 Basic Usage

The following example creates a 2px solid separator between three columns.

CSS

p {
    column-count: 3;
    column-gap: 20px;
    column-rule-style: solid;
    column-rule-width: 2px;
}

This creates a three-column layout with a solid vertical line of 2px thickness between each column.

πŸ”Ή column-rule-width Values

  • Available Values

  • length β†’ Custom thickness (px, em, rem, etc.)
  • thin β†’ Thin separator line
  • medium β†’ Medium thickness line (default)
  • thick β†’ Thick separator line
  • initial β†’ Resets to default value
  • inherit β†’ Inherits value from parent element

πŸ“Œ Value Summary

  • thin β†’ Very light separator line
  • medium β†’ Standard default thickness
  • thick β†’ Strong visual separator
  • length β†’ Full control over thickness (e.g. 1px, 3px, 5px)

πŸ’‘ Practical Example

CSS

.article {
    column-count: 3;
    column-gap: 25px;
    column-rule-style: solid;
    column-rule-width: 1px;
    column-rule-color: #ccc;
}

This example creates a clean multi-column layout with a thin 1px separator line between columns.

  • 🧠 Summary

  • column-rule-width defines the thickness of the column separator line.
  • It works with column-rule-style and column-rule-color.
  • Values include thin, medium, thick, or custom length values.
  • Commonly used in newspaper and magazine-style layouts.
CSS column-rule-style
CSS column-rule-color