column-rule-style

The column-rule-style CSS property specifies type of line that’s drawn between columns in a CSS multi-column layout.

The property is sort of limited on its own. When we declare it, it will draw a line between CSS columns that’s one pixel wide and black.

.columns {
  columns: 2 600px;
  column-rule-style: solid;
}

Things get more interesting when we start combining column-rule-style with other column-rule- properties, including column-rule-width (to set a thicker line) and column-rule-color (to change the color).

.columns {
  columns: 2 600px;
  column-rule-style: solid;
  column-rule-width: 3px;
  column-rule-color: #f8a100;
}

Or, hey, we can simply use the column-rule shorthand property that combines all three in a single declaration:

.columns {
  columns: 2 600px;
  column-rule: solid 3px #f8a100;
}

Syntax

column-rule-style: <'border-style'>;

• Initial value: none
• Applies to: multi-column containers
• Inherited: no
• Computed value: specified keyword
• Animation type: discrete

Values

column-rule-style accepts the following values:

/* Keyword 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: unset;

Demo

Browser support

Related properties

• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-width
• column-span
• column-width
• columns

Specification

CSS Multi-column Layout Module Level 1 (Editor’s Draft)