mozilla

Revision 21046 of border-bottom-color

  • Revision slug: CSS/border-bottom-color
  • Revision title: border-bottom-color
  • Revision id: 21046
  • Created:
  • Creator: Rappo
  • Is current revision? No
  • Comment /* Examples */

Revision Content

{{template.CSSRef()}}

Summary

border-bottom-color sets the color of the bottom border of an element, either through a color value or the keyword transparent.

  • Initial value: 'color' property
  • Applies to: all elements
  • Inherited: no
  • Percentages: N/A
  • Media: visual
  • Computed value: when taken from the 'color' property, the computed value of 'color'; otherwise, as specified

Syntax

border-bottom-color: color | transparent | inherit

Values

color 
The color can be specified as a hexidecimal RGB value, a regular RGB value, or by using one of the pre-defined color keywords.
transparent 
The element has no color of its own, instead showing the color of the element behind it.

Examples

Here is an example of what the code below looks like.
element {
	width: 300px;
        padding: 15px;
        border-bottom-size: 1px;
        border-bottom-style: solid;
        border-bottom-color: #000;
}

Notes

Specifications

Browser Compatibility

Browser Lowest Version
Internet Explorer 4
Firefox 1
Netscape 6
Opera 3.5


See Also

{{wiki.template('CSS_Reference:Border-Bottom-Color')}}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p><code>border-bottom-color</code> sets the color of the bottom border of an element, either through a color value or the keyword <code>transparent</code>.
</p>
<ul><li> Initial value: 'color' property
</li><li> Applies to: all elements
</li><li> Inherited: no
</li><li> Percentages: N/A
</li><li> Media: <a href="en/CSS/Media/Visual">visual</a>
</li><li> Computed value: when taken from the 'color' property, the computed value of 'color'; otherwise, as specified
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">border-bottom-color: <i>color</i> | transparent | inherit
</pre>
<h3 name="Values"> Values </h3>
<dl><dt> color </dt><dd> The color can be specified as a hexidecimal RGB value, a regular RGB value, or by using one of the pre-defined color keywords.
</dd><dt> transparent </dt><dd> The element has no color of its own, instead showing the color of the element behind it.
</dd></dl>
<h3 name="Examples"> Examples </h3>
<table style="width: 300px; padding: 15px; border-bottom-size: 1px; border-bottom-style: solid; border-bottom-color: #000;"><tbody><tr><td>Here is an example of what the code below looks like.</td></tr></tbody></table>
<pre>element {
	width: 300px;
        padding: 15px;
        border-bottom-size: 1px;
        border-bottom-style: solid;
        border-bottom-color: #000;
}

</pre>
<h3 name="Notes"> Notes </h3>
<ul><li> <a class="external" href="http://html-color-codes.com/">Color Chart by VisiBone</a>
</li></ul>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#border-color">CSS 1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom-color">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#border-bottom">CSS 3</a>
</li></ul>
<h3 name="Browser_Compatibility"> Browser Compatibility </h3>
<table class="standard-table">
  <tbody><tr>
    <th>Browser</th>
    <th>Lowest Version</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Firefox</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>6</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>3.5</td>
  </tr>
</tbody></table>
<p><br>
</p>
<h3 name="See_Also"> See Also </h3>
<p>{{wiki.template('CSS_Reference:Border-Bottom-Color')}}
</p>
Revert to this revision