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:
| none | This is the default value. It specifies no rule. |
| solid | Sets a solid rule. |
| dashed | Sets a dashed rule. |
| dotted | Sets a dotted rule. |
| double | Sets a double rule. |
| groove | Sets a 3D groove rule. |
| ridge | Sets a 3D ridge rule. |
| inset | Sets a 3D inset rule. |
| outset | Sets a 3D outset rule. |
| hidden | The rule remains hidden. |
| initial | Sets the column-rule-style property to its default value(none). |
| inherit | Inherits the column-rule-style property from the parent element. |
General Info
| Default Value | none |
| Inherited | No |
| JavaScript Usage | element.style.columnRuleStyle = “dashed” |
