border-bottom-color

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

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

{{template.CSSRefExampleLink("border-bottom-color")}}

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>
<p>{{template.CSSRefExampleLink("border-bottom-color")}}
</p>
<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