mozilla

Revision 20680 of border-width

  • Revision slug: CSS/border-width
  • Revision title: border-width
  • Revision id: 20680
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 91 words added, 34 words removed

Revision Content

{{ CSSRef() }}

Summary

The {{ cssxref("border-width") }} CSS property sets the width of the border of a box.

  • {{ Xref_cssinitial() }}: {{ Cssxref("medium") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: N/A
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: absolute length; '0' if the border style is 'none' or 'hidden'

Syntax

 border-width:  <border-width> {1,4}

Values

Accepts one, two, three or four <border-width> values. These whitespace separated values set the width of the top, right, bottom, and left border of a box.

If one value is set, this width applies to all 4 sides.
If two values are set, the first applies to top and bottom, the second applies to the right and left side.
Three values apply to the top, right and bottom side. The left side takes the second value.
Four values apply to the top, right, bottom, left side in that order.

<border-width>
is one value or keyword of:   {{ Xref_csslength() }} | thin | medium | thick
thin
Depends on the UA. Typically 1px in desktop browsers like Firefox, Safari, Opera. 2px in IE.
medium
Depends on the UA. Typically 3px in desktop browsers like Firefox, Safari, Opera. 4px in IE.
thick
Depends on the UA. Typically 5px in desktop browsers like Firefox, Safari, Opera. 6px in IE.
<length>
The border's thickness has an explicit value. Cannot be negative. See {{ Xref_csslength() }} for possible units.

Related properties

  • {{ Cssxref("border-bottom-width") }}
  • {{ Cssxref("border-left-width") }}
  • {{ Cssxref("border-right-width") }}
  • {{ Cssxref("border-top-width") }} 

Examples

{{ CSSRefExampleLink("border") }}

element {
    border: solid #ccc;
    border-width: 5px;        /* 5px wide border on all 4 sides; same as  "border: solid #ccc 5px" */
}

element  border: solid red;
    border-width: 2px 4px;    /* 2px wide top and bottom border, 4px right and left border */
}

element {
    border: solid orange;
    border-width: 0.3em 0;   /* 0.3em wide top and bottom border, no border on right and left side */
}

element { 
    border: solid lightgreen;
    border-width: medium 0 1px thick;  /* three different width, no border on the right side */
}

Specifications

Browser Compatibility

Browser Lowest Version
Internet Explorer  4.0
Firefox (Gecko)  1.0 (1.0)
Opera  3.5
Safari (WebKit)  1.0 (85)

 See Also

{{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}

{{ languages( { "fr": "fr/CSS/border-width", "pl": "pl/CSS/border-width", "es": "es/CSS/border-width" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>The {{ cssxref("border-width") }} CSS property sets the width of the border of a box.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("medium") }}</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() }}: absolute length; '0' if the border style is 'none' or 'hidden'</li>
</ul>
<h3 name="Syntax">Syntax</h3>
<pre class="eval"> border-width:  &lt;border-width&gt; {1,4}
</pre>
<h3 name="Values">Values</h3>
<p>Accepts one, two, three or four<code> &lt;border-width&gt; </code>values. These whitespace separated values set the width of the top, right, bottom, and left border of a box.</p>
<p>If<strong> one </strong>value is set, this width applies to<strong> all 4 sides</strong>.<br>
If<strong> two </strong>values are set, the<strong> first </strong>applies to <strong>top and bottom</strong>, the <strong>second</strong> applies to the <strong>right and left</strong> side.<br>
<strong>Three</strong> values apply to the top, right and bottom side. The left side takes the second value.<br>
<strong>Four</strong> values apply to the <strong>top, right, bottom, left</strong> side in that order.</p>
<dl><dt><strong>&lt;border-width&gt;</strong> </dt><dd> is one value or keyword of:   {{ Xref_csslength() }}<code> | thin | medium | thick </code><br>
</dd><dt>thin </dt><dd>Depends on the UA. Typically <strong>1px</strong> in desktop browsers like Firefox, Safari, Opera.<strong> 2px </strong>in IE. </dd><dt> medium </dt><dd>Depends on the UA. Typically <strong>3px</strong> in desktop browsers like Firefox, Safari, Opera.<strong> 4px </strong>in IE. </dd><dt> thick </dt><dd>Depends on the UA. Typically <strong>5px</strong> in desktop browsers like Firefox, Safari, Opera.<strong> 6px </strong>in IE.</dd><dt>&lt;length&gt;</dt><dd>The border's thickness has an explicit value. Cannot be negative. See {{ Xref_csslength() }} for possible units.</dd></dl>
<h3 name="Related_properties">Related properties</h3>
<ul> <li>{{ Cssxref("border-bottom-width") }}</li> <li>{{ Cssxref("border-left-width") }}</li> <li>{{ Cssxref("border-right-width") }}</li> <li>{{ Cssxref("border-top-width") }} </li>
</ul>
<h3 name="Examples">Examples</h3>
<p>{{ CSSRefExampleLink("border") }}</p>
<pre>element {
    border: solid #ccc;
    border-width: 5px;        /* 5px wide border on all 4 sides; same as  "border: solid #ccc 5px" */
}

element  border: solid red;
    border-width: 2px 4px;    /* 2px wide top and bottom border, 4px right and left border */
}

element {
    border: solid orange;
    border-width: 0.3em 0;   /* 0.3em wide top and bottom border, no border on right and left side */
}

element { 
    border: solid lightgreen;
    border-width: medium 0 1px thick;  /* three different width, no border on the right side */
}
</pre>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-width-properties" title="http://www.w3.org/TR/CSS21/box.html#border-width-properties">CSS 2.1 Box #border-width</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-width" title="http://www.w3.org/TR/css3-background/#the-border-width"><span style="text-decoration: underline;">CSS 3 Background #border-width</span></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> <strong>4.0</strong></td> </tr> <tr> <td>Firefox (Gecko)</td> <td> <strong>1.0</strong> (1.0)</td> </tr> <tr> <td>Opera</td> <td> <strong>3.5</strong></td> </tr> <tr> <td>Safari (WebKit)</td> <td> <strong>1.0</strong> (85)</td> </tr> </tbody>
</table>
<h3> See Also</h3>
<p>{{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}</p>
<p>{{ languages( { "fr": "fr/CSS/border-width", "pl": "pl/CSS/border-width", "es": "es/CSS/border-width" } ) }}</p>
Revert to this revision