border-width

  • Revision slug: CSS/border-width
  • Revision title: border-width
  • Revision id: 356053
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The border-width CSS property sets the width of the border of a box. Using the shorthand property {{ cssxref("border") }} is often more convenient.

  • {{ Xref_cssinitial() }} {{cssinitial("border-width")}}
  • Applies to all elements
  • {{Xref_cssinherited()}} no
  • Percentages N/A
  • Media {{ Xref_cssvisual() }}
  • {{Xref_csscomputed()}} absolute length; 0 if the {{ cssxref("border-style") }} is none or hidden.

Syntax

Formal syntax: {{csssyntax("border-width")}}
border-width: width                  /* One-value syntax */
border-width: horizontal vertical    /* Two-value syntax */
border-width: top vertical bottom    /* Three-value syntax */
border-width: top right bottom left  /* Four-value syntax */

border-width: inherit

Values

<br-width>
Is either a non-negative explicit {{ xref_csslength() }} value or a keyword denoting the thickness of the bottom border. The keyword must be one of the following values:
thin
 
A thin border
medium
 
A medium border
thick
 
A thick border
The specification doesn't precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the thin ≤ medium ≤ thick inequality and that the values are constant on a single document.

inherit

Is a keyword indicating that all four values are inherited from their parent's element calculated value.

Examples

border: ridge #ccc;
border-width: 6px;  /* same as "border: ridge #ccc 6px";  6px wide border on all 4 sides */
border: solid red;
border-width: 2px 10px;  /* 2px wide top and bottom border, 10px right and left border */
border: dotted orange;
border-width: 0.3em 0;   /* 0.3em wide top and bottom border, no border right and left */
border: solid lightgreen;
border-width: medium 0 1px thick;  /* three different width, no right border */

Specifications

Specification Status Comment
{{ SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width') }} {{ Spec2('CSS3 Backgrounds') }} No direct change, the {{ xref_csslength() }} CSS data type extension has an effect on this property.
{{ SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width') }} {{ Spec2('CSS2.1') }} Added the constraint that values' meaning must be constant inside a document.
{{ SpecName('CSS1', '#border-width', 'border-width') }} {{ Spec2('CSS1') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop("1.0") }} 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") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See Also

  • The border-related shorthand properties: {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}
  • The border-width-related properties: {{ Cssxref("border-bottom-width") }}, {{ Cssxref("border-left-width") }}, {{ Cssxref("border-right-width") }}, {{ Cssxref("border-top-width") }}

Revision Source

<div>
  {{ CSSRef() }}</div>
<h2 id="Summary">Summary</h2>
<p>The <code>border-width</code> CSS property sets the width of the border of a box. Using the shorthand property {{ cssxref("border") }} is often more convenient.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> {{cssinitial("border-width")}}</li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{Xref_cssinherited()}}</dfn> no</li>
  <li><dfn>Percentages</dfn> N/A</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{Xref_csscomputed()}}</dfn> absolute length; <code>0</code> if the {{ cssxref("border-style") }} is <code>none</code> or <code>hidden.</code></li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("border-width")}}
</pre>
<pre>
border-width: <em>width</em> <em>                 /* One-value syntax */</em>
border-width: <em>horizontal</em> <em>vertical</em> <em>   /* Two-value syntax */</em>
border-width: <em>top</em> <em>vertical</em> <em>bottom </em><em>   /* Three-value syntax */</em>
border-width: <em>top</em> <em>right</em> <em>bottom</em> <em>left </em><em> /* Four-value syntax */</em>

border-width: inherit
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code>&lt;br-width&gt;</code></dt>
  <dd>
    Is either a non-negative explicit {{ xref_csslength() }} value or a keyword denoting the thickness of the bottom border. The keyword must be one of the following values:
    <table class="standard-table">
      <tbody>
        <tr>
          <td style="vertical-align: middle;"><code>thin</code></td>
          <td style="vertical-align: middle;">
            <div style="margin:0.5em; width:3em; height:3em; border-style:solid; border-width:thin; background-color:palegreen;">
              &nbsp;</div>
          </td>
          <td style="vertical-align: middle;">A thin border</td>
        </tr>
        <tr>
          <td style="vertical-align: middle;"><code>medium</code></td>
          <td style="vertical-align: middle;">
            <div style="margin:0.5em; width:3em; height:3em; border-style:solid; border-width:medium; background-color:palegreen;">
              &nbsp;</div>
          </td>
          <td style="vertical-align: middle;">A medium border</td>
        </tr>
        <tr>
          <td style="vertical-align: middle;"><code>thick</code></td>
          <td style="vertical-align: middle;">
            <div style="margin:0.5em; width:3em; height:3em; border-style:solid; border-width:thick; background-color:palegreen;">
              &nbsp;</div>
          </td>
          <td style="vertical-align: middle;">A thick border</td>
        </tr>
      </tbody>
    </table>
    The specification doesn't precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the <code>thin ≤ medium ≤ thick</code> inequality and that the values are constant on a single document.</dd>
</dl>
<p><code>inherit</code></p>
<dl>
  <dd>
    Is a keyword indicating that all four values are inherited from their parent's element calculated value.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre style="border:ridge #ccc; border-width:6px">
border: ridge #ccc;
border-width: 6px;  /* same as "<strong>border: ridge #ccc 6px</strong>";  6px wide border on all 4 sides */</pre>
<pre style="border:solid red; border-width:2px 10px">
border: solid red;
border-width: 2px 10px;  /* 2px wide top and bottom border, 10px right and left border */
</pre>
<pre style="border:dotted orange; border-width:0.3em 0">
border: dotted orange;
border-width: 0.3em 0;   /* 0.3em wide top and bottom border, no border right and left */
</pre>
<pre style="border:solid lightgreen; border-width:medium 0 1px thick">
border: solid lightgreen;
border-width: medium 0 1px thick;  /* three different width, no right border */
</pre>
<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', '#the-border-width', 'border-width') }}</td>
      <td>{{ Spec2('CSS3 Backgrounds') }}</td>
      <td>No direct change, the {{ xref_csslength() }} CSS data type extension has an effect on this property.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>Added the constraint that values' meaning must be constant inside a document.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS1', '#border-width', 'border-width') }}</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") }}</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") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_Also">See Also</h2>
<ul>
  <li>The border-related shorthand properties: {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}</li>
  <li>The border-width-related properties: {{ Cssxref("border-bottom-width") }}, {{ Cssxref("border-left-width") }}, {{ Cssxref("border-right-width") }}, {{ Cssxref("border-top-width") }}</li>
</ul>
Revert to this revision