CSS column-rule Property

❮ Prev Next ❯

The column-rule is a shorthand property that defines the style, the width and the color of the rule between columns. It is specified by the following properties:

If the column-rule-color property is not set, the color of the text will be applied. Like other shorthand properties if a value is not specified it is set to its initial value.

The column-rule property is one of the CSS3 properties.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Some property extensions are added, such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -moz- for Firefox, -o- for older versions of Opera, etc.

Initial Value	medium none currentColor
Applies to	medium none currentColor
Inherited	No.
Animatable	Yes. The color and the width of the column-rule are animatable.
Version	CSS3
DOM Syntax	object.style.columnRule = "5px outset #ccc";

Syntax

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

Example of the column-rule property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        /* Chrome, Safari, Opera */
        -webkit-column-count: 3;
        -webkit-column-gap: 30px;
        -webkit-column-rule: 5px dotted #ccc;
        /* Firefox */
        -moz-column-count: 3;
        -moz-column-gap: 30px;
        -moz-column-rule: 5px dotted #ccc;
        column-count: 3;
        column-gap: 30px;
        column-rule: 5px dotted #ccc;
      }
    </style>
  </head>
  <body>
    <h1>Column-rule-style example</h1>
    <p>Here the column-rule is set to 5px dotted gray.</p>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Result

You can define only one value and it still will work.

Example of the column-rule property with one value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        -webkit-column-count: 3;
        -webkit-column-gap: 30px;
        -webkit-column-rule: dashed;
        -moz-column-count: 3;
        -moz-column-gap: 30px;
        -moz-column-rule: dashed;
        column-count: 3;
        column-gap: 30px;
        column-rule: dashed;
      }
    </style>
  </head>
  <body>
    <h2>Column-rule-style example</h2>
    <p>Here the column-rule is set to only "dashed".</p>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

In this example the width of the rule is 10px, the style is "groove" and the color is gray.

Example of the column-rule property with specified width, style and color:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        /* Chrome, Safari, Opera */
        -webkit-column-count: 4;
        -webkit-column-gap: 30px;
        -webkit-column-rule: 10px groove #ccc;
        /* Firefox */
        -moz-column-count: 4;
        -moz-column-gap: 30px;
        -moz-column-rule: 10px groove #ccc;
        column-count: 4;
        column-gap: 30px;
        column-rule: 10px groove #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Column-rule-style example</h2>
    <p>Here the column-rule is set to 10px groove gray.</p>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Values

Value	Description
column-rule-width	Defines the width between columns. Default value is "medium".
column-rule-style	Defines the style of the rule between columns. Default value is "none".
column-rule-color	Sets the color of the rule. Default value is the current color of the element.
initial	Sets the property to its default value.
inherit	Inherits the property from its parent element.