CSS - column-rule-width

The column-rule-width CSS property lets you set the width of the rule drawn between columns in multi-column layouts.

Example

CSS

Copy Code

#header {
  column-rule-width: thick;
}

Syntax

CSS

Copy Code

/* Keyword values */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;

/* Length values */
column-rule-width: 1px;
column-rule-width: 2.5em;

/* Global values */
column-rule-width: inherit;
column-rule-width: initial;
column-rule-width: unset;

Values

<br-width>: Is a <length> or one of the thin, medium or thick keyword describing the width of the rule separating two columns.

Formal syntax

CSS

Copy Code

<a href="css/column-rule-width#br-width"><br-width></a><p>where <br><code><br-width> = <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> thin <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> medium <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> thick</code></p>

Description

The column-rule-width CSS property lets you set the width of the rule drawn between columns in multi-column layouts.

Initial value	`medium`
Applies to	multicol elements
Inherited	no
Media	visual
Computed value	the absolute length; `0` if the `column-rule-style` is `none` or `hidden`
Animatable	yes, as a length
Canonical order	the unique non-ambiguous order defined by the formal grammar

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)-webkit	3.5 (1.9.1)-moz	10	11.10	3.0 (522)-webkit
Unprefixed	50.0

Feature	Android	Android Webview	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	?	?	(Yes)	?	?	?	?
Unprefixed	No support	50.0					50.0

Specifications

Specification	Status	Comment
CSS Multi-column Layout Module The definition of 'column-rule-width' in that specification.	Candidate Recommendation	Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/column-rule-width

CSS CSS Multi-columns CSS Property NeedsMobileBrowserCompatibility Reference