mozilla

Revision 293613 of border

  • Revision slug: CSS/border
  • Revision title: border
  • Revision id: 293613
  • Created:
  • Creator: Pbb
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}.

Like all shorthand properties, a missing value for one of the longhand properties is set to the corresponding initial value. Also note that {{ cssxref("border-image") }}, though not settable using this shorthand, is reset to its initial value, that is none. This allows to use border to reset any border settings set earlier in the cascade. As the W3C intends to preserve this property in future level of the spec, it is recommended to use this method to reset border settings.

Note: While the {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}, and {{ Cssxref("border-color") }} properties and even the {{ cssxref("margin") }} and {{ cssxref("padding") }} shorthand properties accept up to four values, allowing to set different width, style or color, for the different border, this property only accepts one value for each property, leading to the same border for the four edges.

  • {{ Xref_cssinitial() }}: see individual properties for details
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: see individual properties

Syntax

border:  <border-width> || <border-style> || <color>

Values

border-width
Default value medium is used if absent. See {{ Cssxref("border-width") }}.
border-style 
Default value none is used if absent. See {{ Cssxref("border-style") }}.
color 
A {{ xref_csscolorvalue() }} denoting the color of the border. If not set, its default value is the value of the element's {{ cssxref("color") }} property (the text color, not the background color). See {{ Cssxref("border-color") }}.

Examples

{{ CSSRefExampleLink("border") }}

element { border: dashed }          /* dashed border of medium thickness, the same color as the text */
element { border: dotted 1.5em }    /* dotted, 1.5em thick border, the same color as the text */
element { border: solid red }       /* solid, red border of medium thickness */
element { border: solid blue 10px } /* solid, blue border of 10px thickness */

Specifications

Specification Status Comment
{{ SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border') }} {{ Spec2('CSS3 Backgrounds') }} Technically removes the support for transparent as it now a valid {{ xref_csscolorvalue() }}; this has no practical influence.
Though it cannot be set to another value using the shorthand, border does now reset {{ cssxref("border-image") }} to its initial value (none).
{{ SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border') }} {{ Spec2('CSS2.1') }} Accepts the inherit keyword. Also accepts transparent as a valid color.
{{ SpecName('CSS1', '#border', 'border') }} {{ Spec2('CSS1') }}  

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() }} 1.0

See also

  • {{ CSS_Reference:Border() }}
  • {{ CSS_Reference:Padding() }}
  • {{ CSS_Reference:Margin() }}
  • {{ CSS_Reference:Outline() }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>border</code> <a href="/en/CSS" title="CSS">CSS</a> property is a shorthand property for setting the individual border property values in a single place in the style sheet. <code>border</code> can be used to set the values for one or more of: {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}.</p>
<p>Like all shorthand properties, a missing value for one of the longhand properties is set to the corresponding initial value. Also note that {{ cssxref("border-image") }}, though not settable using this shorthand, is reset to its initial value, that is <code>none</code>. This allows to use <code>border</code> to reset any border settings set earlier in the cascade. As the W3C intends to preserve this property in future level of the spec, it is recommended to use this method to reset border settings.</p>
<div class="note style-wrap">
  <p><strong>Note:</strong> While the {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}, and {{ Cssxref("border-color") }} properties and even the {{ cssxref("margin") }} and {{ cssxref("padding") }} shorthand properties accept up to four values, allowing to set different width, style or color, for the different border, this property only accepts one value for each property, leading to the same border for the four edges.</p>
</div>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}:</dfn> see individual properties for details</li>
  <li><dfn>Applies to:</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited() }}:</dfn> no</li>
  <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}:</dfn> see individual properties</li>
</ul>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="eval">
border:  &lt;border-width&gt; || &lt;border-style&gt; || &lt;color&gt;
</pre>
<h3 id="Values" name="Values">Values</h3>
<dl>
  <dt>
    border-width</dt>
  <dd>
    Default value<code> medium </code>is used if absent. See {{ Cssxref("border-width") }}.</dd>
  <dt>
    border-style&nbsp;</dt>
  <dd>
    Default value<code> none </code>is used if absent. See {{ Cssxref("border-style") }}.</dd>
  <dt>
    color&nbsp;</dt>
  <dd>
    A {{ xref_csscolorvalue() }} denoting the color of the border. If not set, its default value is the value of the element's {{ cssxref("color") }} property (the text color, not the background color). See {{ Cssxref("border-color") }}.</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<p>{{ CSSRefExampleLink("border") }}</p>
<pre class="brush:css">
element { border: dashed }          /* dashed border of medium thickness, the same color as the text */
element { border: dotted 1.5em }    /* dotted, 1.5em thick border, the same color as the text */
element { border: solid red }       /* solid, red border of medium thickness */
element { border: solid blue 10px } /* solid, blue border of 10px thickness */</pre>
<h2 id="Specifications" name="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', '#the-border-shorthands', 'border') }}</td>
      <td>{{ Spec2('CSS3 Backgrounds') }}</td>
      <td>Technically removes the support for <code>transparent</code> as it now a valid {{ xref_csscolorvalue() }}; this has no practical influence.<br />
        Though it cannot be set to another value using the shorthand, <code>border</code> does now reset {{ cssxref("border-image") }} to its initial value (<code>none</code>).</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>Accepts the <code>inherit</code> keyword. Also accepts <code>transparent</code> as a valid color.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS1', '#border', 'border') }}</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>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&nbsp;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>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ CSS_Reference:Border() }}</li>
  <li>{{ CSS_Reference:Padding() }}</li>
  <li>{{ CSS_Reference:Margin() }}</li>
  <li>{{ CSS_Reference:Outline() }}</li>
</ul>
Revert to this revision