column-rule

  • Revision slug: CSS/column-rule
  • Revision title: column-rule
  • Revision id: 27948
  • Created:
  • Creator: kuvik3
  • Is current revision? No
  • Comment Browser compatibility; 8 words added, 4 words removed

Revision Content

{{ CSSMozExtensionRef() }}{{ gecko_minversion_header("1.9.1") }}

Summary

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

  • {{ Xref_cssinitial() }}: medium {{ Cssxref("none") }} currentColor
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}

Syntax

-moz-column-rule:  <border-width> || <border-style> || <color>

Values

Accepts one, two or three values in any order:

<border-width>
Optional, is one value or keyword of:  {{ Xref_csslength() }} | thin | medium | thick
Default value medium is used if absent. See {{ cssxref("border-width") }} for details.
<border-style>
Required, default value none is used if absent. See {{ cssxref("border-style") }} for possible values and details.
<color>
Optional, see {{ Xref_csscolorvalue() }} value. Default value if absent: {{ cssxref("color_value","currentColor") }}, the value of the element's color property (foreground color).

Examples

p.foo { -moz-column-rule: dotted; }          /* same as "medium dotted currentColor" */
p.bar { -moz-column-rule: solid blue; }      /* same as "medium solid blue" */
p.baz { -moz-column-rule: solid 8px; }       /* same as "8px solid currentColor" */
p.abc { -moz-column-rule: thick inset blue; }

Live Example

padding:0.3em; background:gold; border:groove 2px gold; -moz-column-rule: inset 2px gold; -moz-column-width:17em; -webkit-columns:17em; -webkit-column-rule: inset 2px gold;

Specifications

Browser compatibility

Browser Lowest Version Support of
Internet Explorer 10 column-rule
Firefox (Gecko) 3.5 (1.9.1) -moz-column-rule
Opera 11.1 column-rule
Safari (WebKit) 3.0 (522) -webkit-column-rule

See also

  • {{ cssxref("-moz-column-rule-style") }}, {{ cssxref("-moz-column-rule-width") }}, {{ cssxref("-moz-column-rule-color") }}

{{ languages( { "ja": "ja/CSS/-moz-column-rule" } ) }}

Revision Source

<p>{{ CSSMozExtensionRef() }}{{ gecko_minversion_header("1.9.1") }}</p>
<h3>Summary</h3>
<p>In multi-column layouts, the<code> -moz-column-rule </code>CSS property specifies a straight line, or "rule", to be drawn between each column.<code> -moz-column-rule </code>is a convenient shorthand to avoid setting each of the individual<code> -moz-column-rule-* </code>properties separately:<br>
{{ Cssxref("-moz-column-rule-width") }}, {{ Cssxref("-moz-column-rule-style") }} and {{ Cssxref("-moz-column-rule-color") }}.</p>
<ul> <li>{{ Xref_cssinitial() }}:<code> medium {{ Cssxref("none") }} currentColor</code></li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}</li>
</ul>
<h3>Syntax</h3>
<pre>-moz-column-rule:  &lt;border-width&gt; || &lt;border-style&gt; || &lt;color&gt;</pre>
<h3>Values</h3>
<p>Accepts one, two or three values in any order:</p>
<dl> <dt>&lt;border-width&gt;</dt> <dd><em>Optional,</em> is one value or keyword of:  {{ Xref_csslength() }}<code> | thin | medium | thick </code><br> Default value<code> medium </code>is used if absent. See {{ cssxref("border-width") }} for details.</dd> <dt>&lt;border-style&gt;</dt> <dd><em>Required</em>, default value<code> none </code>is used if absent. See {{ cssxref("border-style") }} for possible values and details.</dd> <dt>&lt;color&gt;</dt> <dd><em>Optional</em>, see {{ Xref_csscolorvalue() }} value. Default value if absent: {{ cssxref("color_value","currentColor") }}, the value of the element's <span class="lang lang-en"><code><a href="../../../../en/CSS/color" rel="internal">color</a></code> </span> property (foreground color).</dd>
</dl>
<h3>Examples</h3>
<pre>p.foo { -moz-column-rule: dotted; }          /* same as "medium dotted currentColor" */
p.bar { -moz-column-rule: solid blue; }      /* same as "medium solid blue" */
p.baz { -moz-column-rule: solid 8px; }       /* same as "8px solid currentColor" */
p.abc {<code> -moz-column-rule: thick inset blue;</code> }
</pre>
<h4>Live Example</h4>
<div style="padding:0.3em; background:gold; border:groove 2px gold; -moz-column-rule:inset 2px gold; -moz-column-width:17em; -webkit-columns:17em; -webkit-column-rule:inset 2px gold;">
<p>padding:0.3em; background:gold; border:groove 2px gold; <strong>-moz-column-rule: inset 2px gold;</strong> -moz-column-width:17em; -webkit-columns:17em; <strong>-webkit-column-rule: inset 2px gold;</strong></p>
</div>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-multicol/" title="http://www.w3.org/TR/css3-multicol/">CSS 3 Multi-column layout</a> Working draft</li>
</ul>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> <th>Support of</th> </tr> <tr> <td>Internet Explorer</td> <td><strong>10</strong></td> <td><code>column-rule</code></td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>3.5</strong> (1.9.1)</td> <td><code>-moz-column-rule</code></td> </tr> <tr> <td>Opera</td> <td><strong>11.1</strong></td> <td><code>column-rule</code></td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>3.0</strong> (522)</td> <td><code>-webkit-column-rule</code></td> </tr> </tbody>
</table>
<h3>See also</h3>
<ul> <li>{{ cssxref("-moz-column-rule-style") }}, {{ cssxref("-moz-column-rule-width") }}, {{ cssxref("-moz-column-rule-color") }}</li>
</ul>
<div class="noinclude">
<p>{{ languages( { "ja": "ja/CSS/-moz-column-rule" } ) }}</p>
</div>
Revert to this revision