mozilla

Revision 20918 of border-color

  • Revision slug: CSS/border-color
  • Revision title: border-color
  • Revision id: 20918
  • Created:
  • Creator: Qazzian
  • Is current revision? No
  • Comment /* Mozilla extensions */ sp

Revision Content

{{template.CSSRef()}}

Summary

The border-color property is a short hand property for setting the color the four sides of an element's border.

  • Initial value: the element's {{template.Cssxref("color")}} property
  • Applies to: all elements
  • Inherited: no
  • Percentages: N/A
  • Media: visual
  • Computed value: the computed value of color by default, or as specified.

Syntax

border-color: [ <color> || transparent ]{1,4} | 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 border is not drawn but it still takes up space on the page.

Up to four values can be given;

If one color value is given then all four borders are that color.
If two values, the top and bottom border use the first value, the left and right use the second.
If three values, first for the top, second for left and right, third for bottom.
If four values, first for top, second for right, third for bottom, and fourth for left.

Examples

{{template.CSSRefExampleLink("border")}}

element { 
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

Notes

In order to see the border you must also set the {{template.Cssxref("border-width")}} to a positive value and the {{template.Cssxref("border-style")}} to something visible.

Specifications

Browser compatibility

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

Mozilla extensions

The following Mozilla Extensions set the respective border sides to multiple colors for Gecko based browsers.

  • {{template.Cssxref("-moz-border-bottom-colors")}}
  • {{template.Cssxref("-moz-border-left-colors")}}
  • {{template.Cssxref("-moz-border-right-colors")}}
  • {{template.Cssxref("-moz-border-top-colors")}}

See also

{{template.Cssxref("border")}}, {{template.Cssxref("border-width")}}, {{template.Cssxref("border-style")}}

{{ wiki.languages( { "pl": "pl/CSS/border-color" } ) }}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>The <code>border-color</code> property is a short hand property for setting the color the four sides of an element's border. 
</p>
<ul><li> Initial value: the element's {{template.Cssxref("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: the computed value of <code>color</code> by default, or as specified.
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">border-color: [ &lt;color&gt; || transparent ]{1,4} | <i>inherit</i>
</pre>
<h3 name="Values"> Values </h3>
<dl><dt> &lt;color&gt; </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></dl>
<dl><dt> transparent </dt><dd> The border is not drawn but it still takes up space on the page.
</dd></dl>
<p>Up to four values can be given;
</p><p>If one color value is given then all four borders are that color.<br>
If two values, the top and bottom border use the first value, the left and right use the second.<br>
If three values, first for the top, second for left and right, third for bottom.<br>
If four values, first for top, second for right, third for bottom, and fourth for left.
</p>
<h3 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("border")}}
</p>
<pre>element { 
  border-width: 1px;
  border-style: solid;
  border-color: black;
}
</pre>
<h3 name="Notes"> Notes </h3>
<p>In order to see the border you must also set the {{template.Cssxref("border-width")}} to a positive value and the {{template.Cssxref("border-style")}} to something visible.
</p>
<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#border-color-properties">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/css3-background/#the-border-color">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>4</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>3.5</td>
  </tr>
</tbody></table>
<h3 name="Mozilla_extensions"> Mozilla extensions </h3>
<p>The following Mozilla Extensions set the respective border sides to multiple colors for Gecko based browsers.
</p>
<ul><li>{{template.Cssxref("-moz-border-bottom-colors")}}
</li><li>{{template.Cssxref("-moz-border-left-colors")}} 
</li><li>{{template.Cssxref("-moz-border-right-colors")}}
</li><li>{{template.Cssxref("-moz-border-top-colors")}}
</li></ul>
<h3 name="See_also"> See also </h3>
<p>{{template.Cssxref("border")}}, {{template.Cssxref("border-width")}}, {{template.Cssxref("border-style")}}
</p>{{ wiki.languages( { "pl": "pl/CSS/border-color" } ) }}
Revert to this revision