Avatar of Geoff Graham
Geoff Graham on (Updated on )

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;


column-rule-style: <'border-style'>;
  • Initial value: none
  • Applies to: multi-column containers
  • Inherited: no
  • Computed value: specified keyword
  • Animation type: discrete


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;


Browser support

Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mini
Source: caniuse


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