column-rule-width
The column-rule-width
CSS property sets the width of the line drawn between columns in a multi-column layout.
Try it
Syntax
css
/* Keyword values */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;
/* <length> values */
column-rule-width: 1px;
column-rule-width: 2.5em;
/* Global values */
column-rule-width: inherit;
column-rule-width: initial;
column-rule-width: revert;
column-rule-width: revert-layer;
column-rule-width: unset;
The column-rule-width
property is specified as a single <'border-width'>
value.
Values
<'border-width'>
-
Is a keyword defined by
border-width
describing the width of the rule. It may be either a<length>
or one of thethin
,medium
, orthick
keywords.
Formal definition
Initial value | medium |
---|---|
Applies to | multicol elements |
Inherited | no |
Computed value | the absolute length; 0 if the column-rule-style is none or hidden |
Animation type | a length |
Formal syntax
column-rule-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
Examples
Setting a thick column rule
HTML
html
<p>
This is a bunch of text split into three columns. The `column-rule-width`
property is used to change the width 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: solid;
column-rule-width: thick;
}
Result
Specifications
Specification |
---|
CSS Multi-column Layout Module Level 1 # crw |
Browser compatibility
BCD tables only load in the browser