column-rule-style

Avatar of Geoff Graham
Geoff Graham on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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

IEEdgeFirefoxChromeSafariOpera
10+12+3.5+4+3.2+11.5+
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mini
85+79+No3.2+All
Source: caniuse

Specification

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