A column rule is a line between columns in a multi-column layout.
The column-rule-style property sets the style of this line.
Possible values include solid, dashed, dotted, double, etc.
A line between columns with a dotted column-rule-style.
<style>
.rule-style {
column-count: 2;
column-gap: 70px;
column-rule-style: dotted;
column-rule-width: 3px;
column-rule-color: orange;
}
</style>
<div class="rule-style">
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>
The column-rule-style property is required for a line to appear.
The value can be any of the border-style values.
column-rule-style: none | hidden | dotted |
dashed | solid | double |
groove | ridge | inset |
outset | initial | inherit;
| Value | Description |
|---|---|
| none | Default, no style, i.e. no line. |
| hidden | Hidden style |
| dotted | Dotted style |
| dashed | Dashed style |
| solid | Solid style |
| double | Double style |
| groove | 3D grooved style. The effect depends on the width and color values |
| ridge | 3D ridged style. The effect depends on the width and color values |
| inset | 3D inset style. The effect depends on the width and color values |
| outset | 3D outset style. The effect depends on the width and color values |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see different column-rule-style values.
<style>
.rule-style-example {
column-count: 2;
column-gap: 70px;
column-rule-style: double;
column-rule-width: 4px;
column-rule-color: orangered;
}
</style>
<div class="rule-style-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-style 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 |
