A column rule is a line between columns in a multi-column layout.
The column-rule-color property sets the color of this line.
Color values can be hex, rgb, hsl, rgba, hsla, or a color name.
A multi-column element with a custom column-rule-color.
<style>
.col-rule-color {
column-count: 2;
column-gap: 70px;
column-rule-style: solid;
column-rule-width: 3px;
column-rule-color: teal;
}
</style>
<div class="col-rule-color">
Claude Monet was raised in Le Havre,
Normandy, and became interested in the
outdoors and drawing from an early age.
Although his mother, Louise-Justine
Aubrée Monet, supported his ambitions
to be a painter, his father, Claude-Adolphe,
disapproved and wanted him to pursue a
career in business. He was very close to
his mother, but she died in January 1857
when he was sixteen years old, and he was
sent to live with his childless, widowed
but wealthy aunt, Marie-Jeanne Lecadre.
He went on to study at the Académie Suisse,
and under the academic history painter
Charles Gleyre, where he was a classmate
of Auguste Renoir. His early works include
landscapes, seascapes, and portraits, but
attracted little attention. A key early
influence was Eugène Boudin who introduced
him to the concept of plein air painting.
From 1883, Monet lived in Giverny, also
in northern France, where he purchased a
house and property and began a vast
landscaping project, including a
water-lily pond.
</div>
If no color is defined, it will inherit the text color.
A column-rule-style value is required for the line to display.
column-rule-color: color | initial | inherit;
| Value | Description |
|---|---|
| color | Sets column rule color. Accepts color name, hex, rgb, rgba, hsl, and hsla |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see different column-rule-color values.
<style>
.rule-color-example {
column-count: 2;
column-gap: 70px;
column-rule-style: solid;
column-rule-width: 3px;
column-rule-color: orange;
}
</style>
<div class="rule-color-example">
Claude Monet was raised in Le Havre,
Normandy, and became interested in the
outdoors and drawing from an early age.
Although his mother, Louise-Justine
Aubrée Monet, supported his ambitions
to be a painter, his father, Claude-Adolphe,
disapproved and wanted him to pursue a
career in business. He was very close to
his mother, but she died in January 1857
when he was sixteen years old, and he was
sent to live with his childless, widowed
but wealthy aunt, Marie-Jeanne Lecadre.
He went on to study at the Académie Suisse,
and under the academic history painter
Charles Gleyre, where he was a classmate
of Auguste Renoir. His early works include
landscapes, seascapes, and portraits, but
attracted little attention. A key early
influence was Eugène Boudin who introduced
him to the concept of plein air painting.
From 1883, Monet lived in Giverny, also
in northern France, where he purchased a
house and property and began a vast
landscaping project, including a
water-lily pond.
</div>
This table shows when column-rule-color support started for each browser.
 Chrome
|
50.0 | Apr 2016 |
 Firefox
|
52.0 | Mar 2017 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
37.0 | May 2016 |
 Safari
|
9.0 | Sep 2015 |
