css properties column-rule-style

The column-rule-style CSS property sets the style of the line drawn between columns in a multi-column layout.

Syntax

/* <'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 valuenone
Applies tomulticol containers
Inheritedno
Computed valuespecified keyword
Animation typediscrete

Formal syntax

<line-style>

Examples

Setting a dashed column rule

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

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

See also