mozilla

Compare Revisions

column-rule

Change Revisions

Revision 27948:

Revision 27948 by kuvik3 on

Revision 27949:

Revision 27949 by teoli on

Title:
column-rule
column-rule
Slug:
CSS/column-rule
CSS/column-rule
Tags:
css, "CSS Reference", CSS3, css3-multicol, NeedsMobileBrowserCompatibility
css, "CSS Reference", CSS3, css3-multicol, NeedsMobileBrowserCompatibility
Content:

Revision 27948
Revision 27949
nn7    <h2>
8      Summary
9    </h2>
n8      {{ CSSMozExtensionRef() }}{{ gecko_minversion_header("1.9.1n11      In multi-column layouts, the <code>column-rule</code> CSS p
>") }}>roperty specifies a straight line, or "rule", to be drawn between
 > each column. It is a convenient shorthand to avoid setting each 
 >of the individual <code>column-rule-*</code> properties separatel
 >y : {{ Cssxref("-moz-column-rule-width") }}, {{ Cssxref("-moz-col
 >umn-rule-style") }} and {{ Cssxref("-moz-column-rule-color") }}.
9    </p>
10    <h3>
11      Summary
12    </h3>
13    <p>
14      In multi-column layouts, the <code>-moz-column-rule</code> 
>CSS property specifies a straight line, or "rule", to be drawn be 
>tween each column. <code>-moz-column-rule</code> is a convenient  
>shorthand to avoid setting each of the individual <code>-moz-colu 
>mn-rule-*</code> properties separately:<br> 
15      {{ Cssxref("-moz-column-rule-width") }}, {{ Cssxref("-moz-c
>olumn-rule-style") }} and {{ Cssxref("-moz-column-rule-color") }} 
>. 
n27    <h3>n23    <h2>
n29    </h3>n25    </h2>
n31-moz-column-rule:  &lt;border-width&gt; || &lt;border-style&gt; |n27column-rule:  &lt;border-width&gt; || &lt;border-style&gt; || &lt
>| &lt;color&gt;>;color&gt;
n33    <h3>n29    <h2>
n35    </h3>n31    </h2>
nn56    <h2>
57      Examples
58    </h2>
59    <pre>
60p.foo { column-rule: dotted; }          /* same as "medium dotted
 > currentColor" */
61p.bar { column-rule: solid blue; }      /* same as "medium solid 
 >blue" */
62p.baz { column-rule: solid 8px; }       /* same as "8px solid cur
 >rentColor" */
63p.abc {<code> column-rule: thick inset blue;</code> }
64</pre>
n61      Examplesn66      Live Example
n63    <pre>n
64p.foo { -moz-column-rule: dotted; }          /* same as "medium d
>otted currentColor" */ 
65p.bar { -moz-column-rule: solid blue; }      /* same as "medium s
>olid blue" */ 
66p.baz { -moz-column-rule: solid 8px; }       /* same as "8px soli
>d currentColor" */ 
67p.abc {<code> -moz-column-rule: thick inset blue;</code> }
68</pre>
69    <h4>
70      Live Example
71    </h4>
72    <div style="padding:0.3em; background:gold; border:groove 2px68    <div style="padding:0.3em; background:gold; border:groove 2px
> gold; -moz-column-rule:inset 2px gold; -moz-column-width:17em; -> gold; -moz-column-rule:inset 2px gold; -moz-column-width:17em; -
>webkit-columns:17em; -webkit-column-rule:inset 2px gold;">>webkit-columns:17em; -webkit-column-rule:inset 2px gold; columns:
 >17em; column-rule:inset 2px gold;">
n74        padding:0.3em; background:gold; border:groove 2px gold; <n70        padding:0.3em; background:gold; border:groove 2px gold; <
>strong>-moz-column-rule: inset 2px gold;</strong> -moz-column-wid>strong>column-rule: inset 2px gold;</strong> column-width:17em;
>th:17em; -webkit-columns:17em; <strong>-webkit-column-rule: inset 
> 2px gold;</strong> 
n77    <h3>n73    <h2>
n79    </h3>n75    </h2>
n85    <h3>n81    <h2>
n87    </h3>n83    </h2>
n147    <h3>n143    <h2>
t149    </h3>t145    </h2>

Back to History