CSS - column-rule-style

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

Example

CSS

Copy Code

#header {
  -moz-column-count: 3;
  -moz-column-gap: 40px;
  -moz-column-rule-style: solid;
}

HTML

Copy Code

<div id="header">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Mauris sit amet maximus quam. Fusce tempor metus turpis, sit amet bibendum purus tincidunt sit amet. 
    Etiam pretium tempus nibh id pharetra. Nullam ut fermentum est. Integer ut convallis eros, sed laoreet dui. 
    Quisque semper eget tortor ac tempor. Vestibulum quis risus ac ex ultricies vehicula. 
    Duis placerat elementum lectus, id vulputate urna placerat vel. Ut tincidunt sit amet velit sed imperdiet. 
    Duis et urna et sem ultricies rhoncus fermentum vitae est.
</div>

Syntax

CSS

Copy Code

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;

Values

<br-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 syntax

CSS

Copy Code

<a href="css/column-rule-style#br-style"><br-style></a><p>where <br><code><br-style> = none <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> hidden <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> dotted <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> dashed <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> solid <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> double <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> groove <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ridge <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> inset <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> outset</code></p>

Description

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

Initial value	`none`
Applies to	multicol elements
Inherited	no
Media	visual
Computed value	as specified
Animatable	no
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-style' 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-style

CSS CSS Multi-columns CSS Property NeedsMobileBrowserCompatibility Reference