Revision 20728 of border-top-color

  • Revision slug: CSS/border-top-color
  • Revision title: border-top-color
  • Revision id: 20728
  • Created:
  • Creator: Yuichiro
  • Is current revision? No
  • Comment 14 words added

Revision Content

{{ CSSRef() }}

Summary

The border-top-color CSS property sets the color of the bottom border of an element. Note that in many cases the shortcut {{ cssxref("border-color") }} is more convenient and preferable.

  • {{ Xref_cssinitial() }}: The element's {{ Cssxref("color") }} property
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: N/A
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: the computed color

Syntax

border-top-color:  <color> | transparent | inherit

Values

<color>
See {{ Xref_csscolorvalue() }} values for the various possible keywords and numerical notations.
transparent
The element has no color of its own, instead showing the color of the element behind it.

Examples

{{ CSSRefExampleLink("border") }}

pre {
    border: ridge 1em gold;
        border-top-color: red;
}

     /* this has the same result:
        border: ridge 1em;
        border-color: red gold gold; */

Specifications

Browser Compatibility

Browser Lowest Version
Chrome 1.0 
Firefox (Gecko) 1.0 (1.0)
Internet Explorer 4.0
Opera 3.5
Safari (WebKit) 1.0 (85)

Mozilla Extensions

{{ Cssxref("-moz-border-top-colors") }} sets the top border to multiple colors for Gecko based browsers like Firefox.

See also

{{ Cssxref("border") }}, {{ Cssxref("border-top") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-right-color") }}, {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-left-color") }}

{{ languages( { "de": "de/CSS/border-top-color", "fr": "fr/CSS/border-top-color", "ja": "ja/CSS/border-top-color", "pl": "pl/CSS/border-top-color" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> border-top-color </code>CSS property sets the color of the bottom border of an element. Note that in many cases the shortcut {{ cssxref("border-color") }} is more convenient and preferable.</p>
<ul> <li>{{ Xref_cssinitial() }}: The element's {{ Cssxref("color") }} property</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: N/A</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: the computed color</li>
</ul>
<h3>Syntax</h3>
<pre>border-top-color:  &lt;color&gt; | transparent | inherit</pre>
<h3>Values</h3>
<dl> <dt>&lt;color&gt;</dt> <dd>See {{ Xref_csscolorvalue() }} values for the various possible keywords and numerical notations.</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>Examples</h3>
<p>{{ CSSRefExampleLink("border") }}</p>
<pre style="border-style: ridge; border-color: red gold gold; border-width: 1em;">pre {
    border: ridge 1em gold;
        border-top-color: red;
}

     /* this has the same result:
        border: ridge 1em;
        border-color: red gold gold; */</pre>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-color-properties" title="http://www.w3.org/TR/CSS21/box.html#border-color-properties">CSS 2.1 Box #border-color</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-color">CSS 3 Background and Borders #border-color</a></li>
</ul>
<h3>Browser Compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Chrome</td> <td>1.0 </td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody>
</table>
<h3>Mozilla Extensions</h3>
<p>{{ Cssxref("-moz-border-top-colors") }} sets the top border to <strong>multiple</strong> colors for Gecko based browsers like Firefox.</p>
<h3>See also</h3>
<p>{{ Cssxref("border") }}, {{ Cssxref("border-top") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-right-color") }}, {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-left-color") }}</p>
<p>{{ languages( { "de": "de/CSS/border-top-color", "fr": "fr/CSS/border-top-color", "ja": "ja/CSS/border-top-color", "pl": "pl/CSS/border-top-color" } ) }}</p>
Revert to this revision