CSS column-rule-style

The column-rule-style property is used to set the style of the rule between adjacent columns in a multi-column layout. It is a longhand property for column-rule.

CSS

column-rule-style: 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 style can be changed using the column-rule-style 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.

Values

none : Defines no rule. This is the default value. In this case, giving column-rule-color and column-rule-width values have no effect.

hidden : This is the same as none and displays no rule.

dotted : Defines a dotted rule.

dashed : Defines rule as a series of small dashes.

solid : Defines rule as a single line.

double : Defines rule consisting of two parallel lines. The total column-rule-width is the sum of the widths of the two lines and the perpendicular space between them.

groove : Defines a 3D grooved rule which appears as if it were carved in canvas.

ridge : Defines a 3D ridged rule which appears as if it were coming out of canvas.

inset : Defines an inset rule.

outset : Defines an outset rule.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

Examples

The following demo shows the rule styles 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 dotted rule is shown below, where dotted is the id of the paragraph whose rule is to be styled.

HTML

<p id="dotted">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;
}


#dotted {
  -webkit-column-rule-style: dotted; /* Chrome, Safari, Opera */
  -moz-column-rule-style: dotted; /* Firefox */
  column-rule-style: dotted;
  -webkit-column-rule-width: 7px; /* Chrome, Safari, Opera */
  -moz-column-rule-width: 7px; /* Firefox */
  column-rule-width: 7px;    
  -webkit-column-rule-color: green; /* Chrome, Safari, Opera */
  -moz-column-rule-color: green; /* Firefox */
  column-rule-color: green;    
}

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

In this example, colors and widths are given to the column rules using the column-rule-color and column-rule-width properties respectively. 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-.