border-color

  • Revision slug: Web/CSS/border-color
  • Revision title: border-color
  • Revision id: 483791
  • Created:
  • Creator: jswisher
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef("CSS Borders") }}

Summary

The border-color CSS property is a shorthand 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") }}

{{cssbox("border-color")}}

Syntax

Formal syntax: {{csssyntax("border-color")}}
border-color:  color                 /* one-value syntax */ 
border-color:  horizontal vertical   /* two-value syntax */
border-color:  top vertical bottom   /* three-value syntax */
border-color:  top right bottom left /* four-value syntax */
border-color:  inherit

Values

color
Is a  {{ Xref_csscolorvalue() }} denoting the color to apply to all four edges. It is used only in the one-value syntax.
horizontal
Is a  {{ Xref_csscolorvalue() }} denoting the color to apply to all horizontal edges, that is the top and bottom edges. It is used only in the two-value syntax.
vertical
Is a  {{ Xref_csscolorvalue() }} denoting the color to apply to all vertical edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.
top
Is a  {{ Xref_csscolorvalue() }} denoting the color to apply to the top edge. It is used only in the three- and four-value syntaxes.
bottom
Is a  {{ Xref_csscolorvalue() }} denoting the color to apply to the bottom edge. It is used only in the three- and four-value syntaxes.
right
Is a  {{ Xref_csscolorvalue() }} denoting the color to apply to the top edge. It is used only in the four-value syntax.
left
Is a  {{ Xref_csscolorvalue() }} denoting the color to apply to the top edge. It is used only in the four-value syntax.
inherit
Is a keyword indicating that all four values are inherited from their parent's element calculated value.

Example for border-color and border-style

HTML Content

<div>
<p>This is a box with a border around it.</p>
</div>

CSS Content

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

{{ EmbedLiveSample('Example_for_border-color_and_border-style') }}

Specifications

Specification Status Comment
{{ SpecName('CSS3 Backgrounds', '#border-color', 'border-color') }} {{ Spec2('CSS3 Backgrounds') }} The transparent keyword has been removed as it is now a part of the {{ xref_csscolorvalue() }} data type.
{{ SpecName('CSS2.1', 'box.html#border-color-properties', 'border-color') }} {{ Spec2('CSS2.1') }} The property is now a shorthand property
{{ SpecName('CSS1', '#border-color', 'border-color') }} {{ Spec2('CSS1') }}  

Browser compatibility

{{ CompatibilityTable() }}

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

[1] 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

  • Border-color related CSS properties: {{ Cssxref("border") }}, {{ cssxref("border-top-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }},
  • Other border-related CSS properteis: {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}

Revision Source

<div>
 {{ CSSRef("CSS Borders") }}</div>
<h2 id="Summary">Summary</h2>
<p>The <code>border-color</code> CSS property is a shorthand 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>
<p>{{cssbox("border-color")}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("border-color")}}</pre>
<pre>
border-color:  <em>color</em>     <em>            /* one-value syntax */ 
</em>border-color:  <em>horizontal vertical   /* two-value syntax */
</em>border-color:  <em>top</em> <em>vertical</em> <em>bottom   /* three-value syntax */</em>
border-color: <em> top right bottom left /* four-value syntax */</em>
border-color:  inherit
</pre>
<h3 id="Values">Values</h3>
<dl>
 <dt>
  <em>color</em></dt>
 <dd>
  Is a&nbsp; {{ Xref_csscolorvalue() }} denoting the color to apply to all four edges. It is used only in the one-value syntax.</dd>
 <dt>
  <em>horizontal</em></dt>
 <dd>
  Is a&nbsp; {{ Xref_csscolorvalue() }} denoting the color to apply to all horizontal edges, that is the top and bottom edges. It is used only in the two-value syntax.</dd>
 <dt>
  <em>vertical</em></dt>
 <dd>
  Is a&nbsp; {{ Xref_csscolorvalue() }} denoting the color to apply to all vertical edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.</dd>
 <dt>
  <em>top</em></dt>
 <dd>
  Is a&nbsp; {{ Xref_csscolorvalue() }} denoting the color to apply to the top edge. It is used only in the three- and four-value syntaxes.</dd>
 <dt>
  <em>bottom</em></dt>
 <dd>
  Is a&nbsp; {{ Xref_csscolorvalue() }} denoting the color to apply to the bottom edge. It is used only in the three- and four-value syntaxes.</dd>
 <dt>
  <em>right</em></dt>
 <dd>
  Is a&nbsp; {{ Xref_csscolorvalue() }} denoting the color to apply to the top edge. It is used only in the four-value syntax.</dd>
 <dt>
  <em>left</em></dt>
 <dd>
  Is a&nbsp; {{ Xref_csscolorvalue() }} denoting the color to apply to the top edge. It is used only in the four-value syntax.</dd>
 <dt>
  <code>inherit</code></dt>
 <dd>
  Is a keyword indicating that all four values are inherited from their parent's element calculated value.</dd>
</dl>
<h2 id="Example_for_border-color_and_border-style" name="Example_for_border-color_and_border-style">Example for border-color and border-style</h2>
<h3 id="HTML_Content">HTML Content</h3>
<pre class="brush: html">
&lt;div&gt;
&lt;p&gt;This is a box with a border around it.&lt;/p&gt;
&lt;/div&gt;
</pre>
<h3 id="CSS_Content">CSS Content</h3>
<pre class="brush: css">
div { 
  border-style: ridge dashed solid;
  border-color: orange blue;
}</pre>
<p>{{ EmbedLiveSample('Example_for_border-color_and_border-style') }}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Backgrounds', '#border-color', 'border-color') }}</td>
   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
   <td>The <code>transparent</code> keyword has been removed as it is now a part of the {{ xref_csscolorvalue() }} data type.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'box.html#border-color-properties', 'border-color') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>The property is now a shorthand property</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#border-color', 'border-color') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>1.0</td>
    <td>{{ CompatGeckoDesktop("1.0") }} [1]</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>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE&nbsp;Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatGeckoMobile("1.9.2") }} [1]</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
   </tr>
  </tbody>
 </table>
</div>
<p>[1] The following Mozilla extensions set the border sides to <strong>multiple</strong> 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") }}</p>
<h2 id="See_also">See also</h2>
<ul>
 <li>Border-color related CSS properties: {{ Cssxref("border") }}, {{ cssxref("border-top-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }},</li>
 <li>Other border-related CSS properteis: {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}</li>
</ul>
Revert to this revision