CSS column-rule Property

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.

Example

#

A line specified with column-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.
<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>

Using column-rule

The column-rule property is a shorthand property for:

Syntax

column-rule: column-rule-width 
             column-rule-style 
             column-rule-color |
             initial | inherit;

Values

#

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.

Browser support

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

You may also like

Guides