BlogsDope image BlogsDope

CSS column-rule-width

Feb. 7, 2018 CSS HTML 1121

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;

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-.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).