mozilla

Revision 20932 of border-color

  • Revision slug: CSS/border-color
  • Revision title: border-color
  • Revision id: 20932
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 7 words added

Revision Content

{{ CSSRef() }}

Summary

The border-color CSS property is a shorthand property for setting the color of the four sides of an element's border: {{ cssxref("border-top-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}

  • {{ Xref_cssinitial() }}: {{ cssxref("currentColor") }}, the element's {{ Cssxref("color") }} property
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: N/A
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: the computed value of color by default, or as specified.

Syntax

border-color:  [ <color> || transparent ]{1,4} | inherit

Values

Accepts one, two, tree or four values.

<color>
See {{ Xref_csscolorvalue() }} value for possible keywords and units.
transparent
The border is not drawn but it still takes up space on the page.

If one color value is given, it applies to all four borders.
Two values apply first to the top and bottom border and second to the left and right border.
Three values apply first to the top, second to the left and right and third to the bottom border.
Four values apply to top, right, bottom and left border in that order.

Examples

{{ CSSRefExampleLink("border") }}

pre { 
  border-style: ridge dashed solid;
  border-color: orange blue;
}

Notes

In order to see the border you must at least set the {{ Cssxref("border-style") }} to something visible.

Specifications

Browser compatibility

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatGeckoDesktop("1.0") }} 1.0 4.0 3.5 1.0 (85)
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatGeckoMobile("1.9.2") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Mozilla Extensions

The following Mozilla extensions set the border sides to multiple colors for Gecko based browsers like Firefox.

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

See also

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

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> border-color </code>CSS property is a shorthand property for setting the color of the four sides of an element's border: {{ cssxref("border-top-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ cssxref("currentColor") }}, 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 value of <code>color</code> by default, or as specified.</li>
</ul>
<h3>Syntax</h3>
<pre>border-color:  [ &lt;color&gt; || transparent ]{1,4} | inherit</pre>
<h3>Values</h3>
<p>Accepts one, two, tree or four values.</p>
<dl> <dt>&lt;color&gt;</dt> <dd>See {{ Xref_csscolorvalue() }} value for possible keywords and units.</dd> <dt>transparent</dt> <dd>The border is not drawn but it still takes up space on the page.</dd>
</dl>
<p>If <strong>one</strong> color value is given, it applies to <strong>all four</strong> borders.<br> <strong>Two</strong> values apply <strong>first</strong> to the <strong>top and bottom</strong> border and <strong>second</strong> to the <strong>left and right</strong> border.<br> <strong>Three</strong> values apply <strong>first</strong> to the <strong>top</strong>, <strong>second</strong> to the <strong>left and right</strong> and <strong>third</strong> to the <strong>bottom</strong> border.<br> <strong>Four</strong> values apply to top, right, bottom and left border in that order.</p>
<h3>Examples</h3>
<p>{{ CSSRefExampleLink("border") }}</p>
<pre style="border-style: ridge dashed solid; border-color: orange blue; border-width: medium;">pre { 
  border-style: ridge dashed solid;
  border-color: orange blue;
}</pre>
<h3>Notes</h3>
<p>In order to see the border you must at least set the {{ Cssxref("border-style") }} to something visible.</p>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-color-properties">CSS 2.1 #border-color</a></li>
</ul>
<h3>Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Firefox (Gecko)</th> <th>Chrome</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatGeckoDesktop("1.0") }}</td> <td>1.0</td> <td>4.0</td> <td>3.5</td> <td>1.0 (85)</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Firefox Mobile (Gecko)</th> <th>Android</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatGeckoMobile("1.9.2") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3>Mozilla Extensions</h3>
<p>The following Mozilla extensions set the border sides to <strong>multiple</strong> colors for Gecko based browsers like Firefox.</p>
<p>{{ Cssxref("-moz-border-top-colors") }}, {{ Cssxref("-moz-border-right-colors") }}, {{ Cssxref("-moz-border-bottom-colors") }}, {{ Cssxref("-moz-border-left-colors") }}</p>
<h3>See also</h3>
<p>{{ Cssxref("border") }}, {{ cssxref("border-top-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}</p>
<p>{{ languages( { "de": "de/CSS/border-color", "es": "es/CSS/border-color", "fr": "fr/CSS/border-color", "ja": "ja/CSS/border-color", "pl": "pl/CSS/border-color" } ) }}</p>
Revert to this revision