CSS column-rule-style Property

CSS column-rule-style property specifies the style of the column rule in a multi-column layout. For example, the column-rule can be ‘solid’, ‘dashed’, ‘dotted’, etc.

A column rule is a vertical line which separates adjacent columns in a multi-column layout. Try out the example below to see how it works:

Example:

div{
  column-count: 3;
  column-rule-style: solid;
}

Use column-rule-style: dashed; to set a dashed column rule.

Example:

div{
  column-count: 3;
  column-rule-style: dashed;
}

CSS Syntax

The column-rule-style property has the following syntax:

column-rule-style: none|solid|dashed|dotted|double|groove|ridge|inset|outset|hidden|initial|inherit;

Property Values

The column-rule-style property accepts the following values:

noneThis is the default value. It specifies no rule.
solidSets a solid rule.
dashedSets a dashed rule.
dottedSets a dotted rule.
doubleSets a double rule.
grooveSets a 3D groove rule.
ridgeSets a 3D ridge rule.
insetSets a 3D inset rule.
outsetSets a 3D outset rule.
hiddenThe rule remains hidden.
initialSets the column-rule-style property to its default value(none).
inheritInherits the column-rule-style property from the parent element.

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.columnRuleStyle = “dashed”