-moz-border-bottom-colors

  • Revision slug: CSS/-moz-border-bottom-colors
  • Revision title: -moz-border-bottom-colors
  • Revision id: 135417
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 1 words added, 1 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

<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

The border color will be red, orange, gold and yellow, starting at the outside:

border:solid 10px;  background:black;  color:gold;  padding:1ex;
-moz-border-top-colors:    #f00 #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
-moz-border-right-colors:  #f00 #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
-moz-border-bottom-colors: #f00 #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
-moz-border-left-colors:   #f00 #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;

 

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>
<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>
<p>The border color will be red, orange, gold and yellow, starting at the outside:</p>
<pre style="border: 10px solid; background: none repeat scroll 0% 0% black; color: gold; padding: 1ex; -moz-border-top-colors: rgb(255, 0, 0) 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-right-colors: rgb(255, 0, 0) 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: rgb(255, 0, 0) 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(255, 0, 0) 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);">border:solid 10px;  background:black;  color:gold;  padding:1ex;
-moz-border-top-colors:    #f00 #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
-moz-border-right-colors:  #f00 #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
-moz-border-bottom-colors: #f00 #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
-moz-border-left-colors:   #f00 #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
</pre>
<p> </p><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