column-rule-style
The column-rule-style
CSS property sets the style of the line drawn between columns in a multi-column layout.
Try it
Syntax
css
/* <'border-style'> values */
column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;
/* Global values */
column-rule-style: inherit;
column-rule-style: initial;
column-rule-style: revert;
column-rule-style: revert-layer;
column-rule-style: unset;
The column-rule-style
property is specified as a single <'border-style'>
value.
Values
<'border-style'>
-
Is a keyword defined by
border-style
describing the style of the rule. The styling must be interpreted as in the collapsing border model.
Formal definition
Initial value | none |
---|---|
Applies to | multicol elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
Examples
Setting a dashed column rule
HTML
html
<p>
This is a bunch of text split into three columns. The `column-rule-style`
property is used to change the style of the line that is drawn between
columns. Don't you think that's wonderful?
</p>
CSS
css
p {
column-count: 3;
column-rule-style: dashed;
}
Result
Specifications
Specification |
---|
CSS Multi-column Layout Module Level 1 # crs |
Browser compatibility
BCD tables only load in the browser