CSS column-rule-width Property Tutorial

In this section, we will learn what column-rule-width property is and how to use it in CSS.

Click here to run the example of column-rule-width property.

CSS column-rule-width Property Definition and Usage

The CSS `column-rule-width` property is used to set the width of the line between each column that is created via the `column-count` property.

Note: before you can use this property, you need to set the style for this line using the `column-rule-style` property.

CSS column-rule-width Property Syntax

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

CSS column-rule-width Property Value

The value we set for this property is a number with any supported CSS units. Basically, the higher value we set for this property means the thicker the target line should be.

We could also use these keywords as well:

  • medium: this value means the target line should have a medium width.
  • thin: this value means the target line should have a thin width.
  • thick: this value means the target line should have a thick width.

Also, the two global values “initial” and “inherit” could also be used for this property.

Example: column-rule-width property in CSS

See the Pen column-rule-width property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS column-rule-width Property Work?

In this example, the value of the column-rule-width property is set to 10px which means the width of each line between columns should be equal to 10px.

Leave a Reply