W3docs
en
Log in

CSS column-rule Property

The column-rule shorthand property sets the style, width, color of the rule between columns. See examples and learn about this property.

The column-rule shorthand property defines the style, width, and color of the rule between columns. Note that it only renders when column-count or columns is set on the element. It is specified by the following properties:

If the column-rule-color property is not set, it defaults to currentColor. 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.

Initial Valuemedium (width), none (style), currentColor (color)
Applies toBlock containers that establish a multi-column layout. It also applies to ::first-letter.
InheritedNo.
AnimatableYes. The color and the width of the column-rule are animatable.
VersionCSS3
DOM Syntaxobject.style.columnRule = "5px outset #ccc";

Syntax

Syntax of CSS column-rule Property

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

Note: The order of width, style, and color values is flexible in the shorthand.

Example of the column-rule property:

Example with width, style, and color values

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 30px;
        column-rule: 5px dotted #ccc;
      }
    </style>
  </head>
  <body>
    <h1>Column-rule 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

CSS column-rule Property

If a single value is provided, it is interpreted as the column-rule-style.

Example of the column-rule property with one value:

Example with a single value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 30px;
        column-rule: dashed;
      }
    </style>
  </head>
  <body>
    <h2>Column-rule 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 »

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

Example with all values specified

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 4;
        column-gap: 30px;
        column-rule: 10px groove #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Column-rule 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

ValueDescription
column-rule-widthDefines the width of the rule between columns. Default value is "medium".
column-rule-styleDefines the style of the rule between columns. Default value is "none".
column-rule-colorSets the color of the rule. Default value is the current color of the element.
initialSets the property to its default value.
inheritInherits the property from its parent element.

Practice

Practice

What does the 'column-rule' property in CSS do?