column-rule-style | CSS-Tricks

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

IE	Edge	Firefox	Chrome	Safari	Opera
10+	12+	3.5+	4+	3.2+	11.5+

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mini
85+	79+	No	3.2+	All

Source: caniuse

Specification

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