Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Dit artikel heeft een technische beoordeling nodig. Hoe u kunt helpen.

Onze vrijwilligers hebben dit artikel nog niet naar het Nederlands vertaald. Doe mee en help de klus te klaren!

Summary

In multi-column layouts, the column-rule CSS property specifies a straight line, or "rule", to be drawn between each column. It is a convenient shorthand to avoid setting each of the individual column-rule-* properties separately : column-rule-width, column-rule-style and column-rule-color.

Initial valueas each of the properties of the shorthand:
Applies tomulticol elements
Inheritedno
Mediavisual
Computed valueas each of the properties of the shorthand:
Animatableas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values

Syntax

column-rule: dotted;
column-rule: solid blue;
column-rule: solid 8px;
column-rule: thick inset blue;

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

Values

Accepts one, two or three values in any order:

<'column-rule-width'>
Is a <length> or one of the three keywords, thin, medium, or thick. See border-width for details.
<'column-rule-style'>
See border-style for possible values and details.
<'column-rule-color'>
Is a <color> value.

Formal syntax

<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>

Examples

/* same as "medium dotted currentColor" */
p.foo { column-rule: dotted; }

/* same as "medium solid blue" */
p.bar { column-rule: solid blue; }

/* same as "8px solid currentColor" */
p.baz { column-rule: solid 8px; }

p.abc { column-rule: thick inset blue; }

Example 1

HTML Content

<div id="col_rul"> 
<p> column one </p>
<p> column two </p>
<p> column three </p>
</div>

CSS Content

#col_rul{ 
padding: 0.3em;
background: gold; 
border: groove 2px gold; 
-moz-column-rule: inset 2px gold;
-moz-column-count: 3;
}

Result

Specifications

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

Browser compatibility

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

Documentlabels en -medewerkers

 Laatst bijgewerkt door: Sebastianz,