W3cubDocs

/CSS

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: 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 value none
Applies to multicol elements
Inherited no
Computed value as specified
Animation type discrete

Formal syntax

<'border-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;
}

Result

Specifications

Specification Status Comment
CSS Multi-column Layout Module
The definition of 'column-rule-style' in that specification.
Working Draft Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
column-rule-style 50
50
1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12
12
12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
52
52
3.5 — 74
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
10 11.1
11.1
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
9
9
3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
column-rule-style 50
50
≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
50
50
18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
52
52
4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
11.1
11.1
14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
9
9
1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
5.0
5.0
1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-style