mozilla

Revision 135419 of -moz-border-bottom-colors

  • Revision slug: CSS/-moz-border-bottom-colors
  • Revision title: -moz-border-bottom-colors
  • Revision id: 135419
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 137 words added, 47 words removed

Revision Content

{{ CSSMozExtensionRef() }}

Summary

In Mozilla applications, -moz-border-bottom-colors sets a list of colors for the bottom border. When an element has a border that is larger than a single CSS pixel, each line of pixels uses the next color specified in this property, from the outside in. This eliminates the need for nested boxes. If the border is wider than the number of colors specified for this property, the remaining part of the border is the innermost color specified.

  • Initial value: N/A
  • Applies to: all elements
  • Inherited: no

The presence of -moz-border-bottom-colors triggers separate border-drawing code that was designed for drawing borders of user interface elements, but does not support some of the other border properties. 

It does not apply to tables with border-collapse:collapse and if {{ Cssxref("border-style") }} is dashed or dotted.

Syntax

-moz-border-bottom-colors:  [<color> | transparent]* <color> | transparent

Values

Accepts a white-space separated list of color values.

<color>
Specifies the color of a line of pixels in the bottom border. See {{ Xref_csscolorvalue() }} value for possible units.
transparent
The line of pixels does not have its own color, instead showing the color of the element behind it.

Related properties

  • {{ Cssxref("-moz-border-left-colors") }} sets colors for the left border
  • {{ Cssxref("-moz-border-right-colors") }} sets colors for the right border
  • {{ Cssxref("-moz-border-top-colors") }} sets colors for the top border

Examples

/*  Other browsers use a "inset gold 10px" border  */

border: inset gold 10px;  color:gold;  background:black;  padding:1em;
-moz-border-top-colors:    #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
-moz-border-right-colors:   red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
-moz-border-bottom-colors:  red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
-moz-border-left-colors:   #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
/*  Other browsers use a "solid 1.5em" border  */

border: solid 1.5em;  -moz-border-radius:1.5em;
-moz-border-top-colors:    maroon maroon khaki maroon khaki maroon maroon transparent;
-moz-border-right-colors:  maroon maroon khaki maroon khaki maroon maroon khaki;
-moz-border-bottom-colors: maroon maroon khaki maroon khaki maroon maroon transparent;
-moz-border-left-colors:   maroon maroon khaki maroon khaki maroon maroon transparent;

Browser compatibility

Supported since Gecko 1.0 (Firefox 1.0).

{{ languages( { "fr": "fr/CSS/-moz-border-bottom-colors", "ja": "ja/CSS/-moz-border-bottom-colors", "pl": "pl/CSS/-moz-border-bottom-colors" } ) }}

Revision Source

<p>{{ CSSMozExtensionRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>In Mozilla applications,<code> -moz-border-bottom-colors </code>sets a list of colors for the bottom border. When an element has a border that is larger than a single CSS pixel, each line of pixels uses the next color specified in this property, from the outside in. This eliminates the need for nested boxes. If the border is wider than the number of colors specified for this property, the remaining part of the border is the innermost color specified.</p>
<ul> <li>Initial value: N/A</li> <li>Applies to: all elements</li> <li>Inherited: no</li>
</ul>
<p>The presence of<code> -moz-border-bottom-colors </code>triggers separate border-drawing code that was designed for drawing borders of user interface elements, but does not support some of the other border properties. </p>
<p>It does not apply to tables with<code> <code>border-collapse:collapse</code> </code>and if {{ Cssxref("border-style") }} is<code> dashed </code>or<code> dotted</code>.</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">-moz-border-bottom-colors:  [&lt;color&gt; | transparent]* &lt;color&gt; | transparent
</pre>
<h3 name="Values">Values</h3>
<p>Accepts a white-space separated list of color values. </p>
<dl><dt> &lt;color&gt;<br>
</dt><dd> Specifies the color of a line of pixels in the bottom border. See {{ Xref_csscolorvalue() }} value for possible units.<br>
</dd><dt> transparent</dt><dd> The line of pixels does not have its own color, instead showing the color of the element behind it. </dd></dl>
<h3 name="Related_properties">Related properties</h3>
<ul> <li>{{ Cssxref("-moz-border-left-colors") }} sets colors for the left border</li> <li>{{ Cssxref("-moz-border-right-colors") }} sets colors for the right border</li> <li>{{ Cssxref("-moz-border-top-colors") }} sets colors for the top border</li>
</ul>
<h3 name="Examples">Examples</h3>
<pre style="border: 10px inset gold; color: gold; background: none repeat scroll 0% 0% black; padding: 1em; -moz-border-top-colors: rgb(238, 0, 0) rgb(204, 51, 0) rgb(204, 85, 0) rgb(204, 102, 0) rgb(204, 119, 0) rgb(204, 136, 0) rgb(204, 153, 0) rgb(204, 170, 0) rgb(204, 187, 0) rgb(204, 204, 0); -moz-border-right-colors: red rgb(255, 102, 0) rgb(255, 136, 0) rgb(255, 153, 0) rgb(255, 170, 0) rgb(255, 187, 0) rgb(255, 204, 0) rgb(255, 221, 0) rgb(255, 238, 0) rgb(255, 255, 0); -moz-border-bottom-colors: red rgb(255, 102, 0) rgb(255, 136, 0) rgb(255, 153, 0) rgb(255, 170, 0) rgb(255, 187, 0) rgb(255, 204, 0) rgb(255, 221, 0) rgb(255, 238, 0) rgb(255, 255, 0); -moz-border-left-colors: rgb(238, 0, 0) rgb(204, 51, 0) rgb(204, 85, 0) rgb(204, 102, 0) rgb(204, 119, 0) rgb(204, 136, 0) rgb(204, 153, 0) rgb(204, 170, 0) rgb(204, 187, 0) rgb(204, 204, 0);">/*  Other browsers use a "inset gold 10px" border  */

border: inset gold 10px;  color:gold;  background:black;  padding:1em;
-moz-border-top-colors:    #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
-moz-border-right-colors:   red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
-moz-border-bottom-colors:  red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
-moz-border-left-colors:   #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
</pre>
<pre style="padding: 0pt; border: 1.5em solid; -moz-border-radius: 1.5em 1.5em 1.5em 1.5em; -moz-border-top-colors: maroon maroon khaki maroon khaki maroon maroon transparent; -moz-border-right-colors: maroon maroon khaki maroon khaki maroon maroon khaki; -moz-border-bottom-colors: maroon maroon khaki maroon khaki maroon maroon transparent; -moz-border-left-colors: maroon maroon khaki maroon khaki maroon maroon transparent;">/*  Other browsers use a "solid 1.5em" border  */

border: solid 1.5em;  -moz-border-radius:1.5em;
-moz-border-top-colors:    maroon maroon khaki maroon khaki maroon maroon transparent;
-moz-border-right-colors:  maroon maroon khaki maroon khaki maroon maroon khaki;
-moz-border-bottom-colors: maroon maroon khaki maroon khaki maroon maroon transparent;
-moz-border-left-colors:   maroon maroon khaki maroon khaki maroon maroon transparent;
</pre><h3 class="editable"><span>Browser compatibility</span></h3>
<p><span>Supported since Gecko 1.0 (Firefox 1.0).</span></p>
<p>{{ languages( { "fr": "fr/CSS/-moz-border-bottom-colors", "ja": "ja/CSS/-moz-border-bottom-colors", "pl": "pl/CSS/-moz-border-bottom-colors" } ) }}</p>
Revert to this revision