CSS column-rule-color Property

CSS column-rule-color Property 

The column-rule-color property in CSS specifies the color of the rule (line) between columns when using the multi-column layout.

1. Syntax

selector {
  column-rule-color: color;
}

2. Property Values

Value	Description
color-name	A predefined color name (e.g., red, blue).
hex	A hex color code (e.g., #ff5733).
rgb / rgba	RGB values with optional transparency (e.g., rgba(0, 0, 255, 0.5)).
hsl / hsla	HSL values with optional transparency (e.g., hsla(240, 100%, 50%, 0.5)).
transparent	Makes the column rule invisible.
inherit	Inherits the color from its parent element.

3. Example Usage

A. Basic Column Rule with a Color

.container {
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: 2px;
  column-rule-color: blue;
}

✅ Creates three columns with a solid blue line between them.

B. Using RGBA for Transparency

.container {
  column-count: 2;
  column-rule-style: dashed;
  column-rule-width: 3px;
  column-rule-color: rgba(255, 0, 0, 0.5);
}

✅ Creates two columns with a semi-transparent red dashed line.

4. Best Practices

✔ Always define column-rule-style and column-rule-width along with column-rule-color.
✔ Use RGBA or HSLA for smooth transparent effects.
✔ Ensure contrast between the rule color and background color for readability.

5. Browser Support

✅ Fully supported in all modern browsers (Chrome, Edge, Firefox, Safari).