CSS

CSS

🎯 CSS column-rule-style Property

The column-rule-style CSS property defines the style of the vertical line (separator) between columns in a multi-column layout.

It is used to visually separate columns in newspaper-style or magazine-style layouts, making content easier to read and more structured.

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

  • Benefits

  • Adds visual separation between columns.
  • Improves readability in multi-column layouts.
  • Creates professional magazine and newspaper effects.
  • Works with column-rule-width and column-rule-color.

🧩 Basic Usage

The following example creates a dashed line between three columns.

CSS

p {
    column-count: 3;
    column-gap: 20px;
    column-rule-style: dashed;
}

This creates a 3-column layout with a dashed separator line between each column.

πŸ”Ή column-rule-style Values

  • Available Values

  • none β†’ No separator line
  • hidden β†’ Invisible line
  • solid β†’ Solid line
  • dashed β†’ Dashed line
  • dotted β†’ Dotted line
  • double β†’ Double line
  • groove β†’ Grooved inset line
  • ridge β†’ Raised ridge line
  • inset β†’ Inset 3D line
  • outset β†’ Outset 3D line

πŸ“Œ Value Summary Table

  • solid β†’ Simple straight line separator
  • dashed β†’ Broken line effect
  • dotted β†’ Dotted separator
  • double β†’ Two parallel lines

πŸ’‘ 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 3-column layout with a thin solid line between each column.

  • 🧠 Summary

  • column-rule-style defines the style of the separator line between columns.
  • It works with column-rule-width and column-rule-color.
  • Common styles include solid, dashed, dotted, and double.
  • Used for improving readability in multi-column layouts.
CSS column-gap
CSS column-rule-width