W3docs
en
Log in

CSS column-rule-width Property

The column-rule-width CSS property sets the width of the rule between columns. Read about the rules of the property and learn the values with the help of examples.

The column-rule-width CSS property defines the width of the rule between columns. The column-rule-width property is one of the CSS3 properties.

The column-rule-width property only takes effect when column-rule-style is not none.

This property has the following values:

  • medium
  • thick
  • thin
  • length
Info

The specification doesn't define the exact thickness of each keyword. However, they always follow this order: thin ≤ medium ≤ thick.

Initial Valuemedium
Applies toMulticol elements.
InheritedNo.
AnimatableYes. The width and color of the rule are animatable.
VersionCSS3
DOM Syntaxobject.style.columnRuleWidth = "5px";

Syntax

Syntax of CSS column-rule-width Property

column-rule-width: medium | thin | thick | length | initial | inherit;

Example of the column-rule-width property:

Example of CSS column-rule-width Property with thick value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 40px;
        column-rule-style: dotted;
        column-rule-color: #666;
        column-rule-width: thick;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h1>Column-rule-width property example</h1>
    <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-width Property

Example of the column-rule-width property with the "thin" value:

Example of CSS column-rule-width Property with thin value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 40px;
        column-rule-style: solid;
        column-rule-width: thin;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h1>Column-rule-width property example</h1>
    <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-width property specified as "15px":

Example of CSS column-rule-width Property with length value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 40px;
        column-rule-style: groove;
        column-rule-color: #1c87c9;
        column-rule-width: 15px;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h1>Column-rule-width property example</h1>
    <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

ValueDescriptionPlay it
mediumThe rule is medium. This is the default value.Play it »
thickThe rule is thick.Play it »
thinThe rule is thin.Play it »
lengthSpecifies the width of the rule.Play it »
initialSets the property to its default value.Play it »
inheritInherits the property from its parent element.

Practice

Practice

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