A column rule is a line between columns in a multi-column layout.
The column-rule-width property sets the width of this line.
If no value is specified, it uses medium or 1px column width.
A line between columns defined with column-rule-width.
<style>
.rule-width {
column-count: 2;
column-gap: 70px;
column-rule-style: solid;
column-rule-color: teal;
column-rule-width: 3px;
}
</style>
<div class="rule-width">
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>
Width values can be set in pixels, or as thin, medium, or thick.
A column-rule-style value is required for a line to display.
column-rule-width: length |
medium | thin | thick |
initial | inherit;
| Value | Description |
|---|---|
| length | Width of the rule |
| medium | Default, medium rule |
| thin | Thin rule |
| thick | Thick rule |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see different column-rule-width values.
<style>
.rule-width-example {
column-count: 2;
column-gap: 70px;
column-rule-style: solid;
column-rule-color: firebrick;
column-rule-width: thin;
}
</style>
<div class="rule-width-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-width 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 |
