CSS

🎯 CSS column-rule Property

The column-rule CSS shorthand property defines the full appearance of the vertical separator line between columns in a multi-column layout in a single declaration.

It combines width, style, and color of the column divider, making multi-column styling faster and cleaner.

🔹 Why Use column-rule?

Benefits
Defines column separator line in one line.
Improves readability in multi-column layouts.
Reduces repetitive CSS code.
Common in newspaper and magazine-style designs.

🧩 Basic Usage

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

CSS


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

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

🔹 column-rule Components

column-rule-width → Thickness of the line
column-rule-style → Style of the line (solid, dashed, dotted, etc.)
column-rule-color → Color of the line

🔹 column-rule Values

2px solid red → Example shorthand usage
initial → Resets to default value
inherit → Inherits value from parent element

💡 Practical Example

CSS


.article {
    column-count: 3;
    column-gap: 25px;
    column-rule: 1px dashed #3498db;
}

This example creates a multi-column layout with a dashed blue separator line between columns.

🧠 Summary
column-rule is a shorthand property for column divider styling.
It combines width, style, and color in one declaration.
Makes multi-column CSS cleaner and easier to manage.
Widely used in modern article and magazine layouts.

CSS column-rule-color

CSS break-before

CSS

CSS