A column rule is a line between columns in a multi-column layout.
The column-rule property is a shorthand property that specifies the style, width, and color.
A line specified with column-rule.
<style>
.col-rule {
column-count: 2;
column-gap: 70px;
column-rule: 4px dotted teal;
}
</style>
<div class="col-rule">
Paul Gauguin was a French Post-Impressionist
artist. Unappreciated until after his death,
Gauguin is now recognized for his experimental
use of color and Synthetist style that were
distinct from Impressionism. Toward the end
of his life, he spent ten years in French
Polynesia. The paintings from this time
depict people or landscapes from that region.
His work was influential on the French
avant-garde and many modern artists, such
as Pablo Picasso and Henri Matisse, and he
is well known for his relationship with
Vincent and Theo van Gogh. Gauguin's art
became popular after his death, partially
from the efforts of dealer Ambroise Vollard,
who organized exhibitions of his work late in
his career and assisted in organizing two
important posthumous exhibitions in Paris.
</div>
The column-rule property is a shorthand property for:
column-rule: column-rule-width
column-rule-style
column-rule-color |
initial | inherit;
| Value | Description |
|---|---|
| column-rule-width | Column width. Default value is medium |
| column-rule-style | Column rule style. Default value is none |
| column-rule-color | Column rule color. Default value is the color inherited from element |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
This table shows when column-rule 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 |
