CSS column-rule-style Property

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.

Example

#

A line between columns with a dotted column-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.
<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>

Using column-rule-style

The column-rule-style property is required for a line to appear.

The value can be any of the border-style values.

Syntax

column-rule-style: none | hidden | dotted | 
                   dashed | solid | double |
                   groove | ridge | inset | 
                   outset | initial | inherit;

Values

#

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.

More Examples

Click the buttons to see different column-rule-style values.

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.
<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>

Browser support

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

You may also like

Guides