The column-rule-width
property is used to set the width of the rule between adjacent columns in a multi-column layout. It is a longhand property for column-rule
.
CSS
column-rule-width: value;
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. Its width can be changed using the column-rule-width
property.
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.
Note that you must define the column-rule-style
property while giving the column-rule-width
value. This is because there is no column rule present by default. So in order to give a rule width, you must first define a rule using the column-rule-style
property.
Values
medium
: Sets a medium width for the rule. This is the default value.
thin
: Sets a thin width for the rule.
thick
: Sets a thick width for the rule.
<length>
: Allows you to define the thickness of the rule. Negative values are not allowed.
initial
: Sets the default value of the property.
inherit
: Inherits the value from parent element.
Examples
The following demo shows the rule widths for different values. The number of columns into which the content of the paragraphs is to be divided is set to 3 using the column-count
property, and the gap between the columns is set as 40px using the column-gap
property. Use the prefix -webkit- for browser support from Chrome, Safari and Opera, and -moz- for support from Firefox.
The code to make a thin rule is shown below, where thin is the id of the paragraph the width of whose rule is to be changed.
HTML
<p id="thin">Lorem ipsum ... malesuada lorem.</p>
CSS
p {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
#thin {
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
-webkit-column-rule-width: thin; /* Chrome, Safari, Opera */
-moz-column-rule-width: thin; /* Firefox */
column-rule-width: thin;
}
See the Pen column-rule-width values by Aakhya Singh (@aakhya) on CodePen.
In this example, rule styles are given using the column-rule-style
property. You may not see good results for multi columns in small devices.
Browser Support
This property is not supported in IE 9 and earlier versions. For maximum browser compatibility, use the prefixes -webkit- and -moz-.