CSS

CSS

🎯 CSS column-rule-color Property

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

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

🔹 Why Use column-rule-color?

  • Benefits

  • Controls the color of column separator lines.
  • Enhances visual design and readability.
  • Helps create modern magazine and newspaper layouts.
  • Works with column-rule-width and column-rule-style.

🧩 Basic Usage

The following example creates a red separator line between three columns.

CSS

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

This creates a 3-column layout with a 2px solid red line between each column.

🔹 column-rule-color Values

  • Available Values

  • color → Any valid CSS color (red, blue, #fff, rgb(), etc.)
  • initial → Resets to default value
  • inherit → Inherits value from parent element

🎨 Color Examples

CSS

div {
    column-rule-style: solid;
    column-rule-width: 1px;
    column-rule-color: #3498db;
}
CSS

div {
    column-rule-color: rgb(255, 0, 0);
}

  • 🧠 Summary

  • column-rule-color sets the color of the separator line between columns.
  • It works with column-rule-style and column-rule-width.
  • Any valid CSS color format can be used.
  • Commonly used in modern multi-column layouts for styling separation lines.
CSS column-rule-width
CSS column-rule