CSS column-rule

The column-rule property is a shorthand property which allows you to change the style, color and width of the rule between adjacent columns in a multi-column layout.

CSS

column-rule: [column-rule-style] [column-rule-width] [column-rule-color];

There is no specific order in which the three values are given in the declaration.

A column rule is like a border drawn between adjacent columns in a multi-column document, which can make it easier to distinguish between different columns if the column gap is small and can make the layout look more presentable.

A column rule does not take up any space. It appears in the middle of the space between adjacent columns. The space between columns can be changed using the column-gap property.

Values

The possible values which can be given for the three longhand properties are given below.

column-rule-style

This property is used to set the style of the rule. It can take the following values. Its default value is none.

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

See the Pen column-rule-style values by Aakhya Singh (@aakhya) on CodePen.

column-rule-width

This is used to set the width of the rule. It can take the following values. Its default value is medium.

<length> | thin | medium | thick

See the Pen column-rule-width values by Aakhya Singh (@aakhya) on CodePen.

Since no column-rule-width value is specified in the above example, so the rules took the default width, which is medium.

column-rule-color

This property is used to set the color of the rule. It can take the following values. Its default value is black.

<color>

See the Pen column-rule-color values by Aakhya Singh (@aakhya) on CodePen.

Since no column-rule-color value is specified in the above example, so the rules took the default color, which is black (or #000).

Apart from these, the column-rule property can also take the following universal values.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

To be noted

• The column-rule-style value must be defined other than none or hiddento make a rule visible. This is because there is no rule present by default. So in order to make a rule visible, you must first define it with the column-rule-style value.
• Rules take the default value for the longhand property whose value is not defined in the declaration. For example, column-rule: solid blue will make the rule take the default value for the column-rule-width property which is medium.

Browser Support

This property is not supported in IE 9 and earlier versions. For maximum browser compatibility, use the prefixes -webkit- and -moz-.