CSS - column-rule

Example

/* 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; }

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

<a href="css/column-rule-width" title="&lt;br-width&gt;"><'column-rule-width'></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/column-rule-style" title="&lt;br-style&gt;"><'column-rule-style'></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/column-rule-color" title="&lt;color&gt;"><'column-rule-color'></a>

Description  

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.

Browser Compatibility  

Specifications  

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;<code class="language-css"> </code>
-moz-column-rule: inset 2px gold;
-moz-column-count: 3;
}

Result

License