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.
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
The possible values which can be given for the three longhand properties are given below.
This property is used to set the style of the rule. It can take the following values. Its default value is
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
This is used to set the width of the rule. It can take the following values. Its default value is
<length> | thin | medium | thick
column-rule-width value is specified in the above example, so the rules took the default width, which is medium.
This property is used to set the color of the rule. It can take the following values. Its default value is black.
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
column-rule-stylevalue must be defined other than
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
- 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-widthproperty which is
This property is not supported in IE 9 and earlier versions. For maximum browser compatibility, use the prefixes -webkit- and -moz-.