mozilla

Revision 20682 of border-width

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

Revision Content

{{ CSSRef() }}

Summary

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

  • {{ 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 and IE 8. 2px in IE 4-7.
medium
Depends on the UA. Typically 3px in desktop browsers like Firefox and IE 8. 4px in IE 4-7.
thick
Depends on the UA. Typically 5px in desktop browsers like Firefox and IE 8. 6px in IE 4-7.
<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

border: ridge #ccc;
border-width: 6px;  /* same as "border: ridge #ccc 6px";  5px 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

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>Summary</h3>
<p>The<code> border-width </code>CSS property sets the width of the border of a box. Using the shortcut property {{template.cssxref("border") is often more convenient. </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;<code> 0 </code>if the<code> border-style </code>is<code> none </code>or<code> hidden</code></li>
</ul>
<h3>Syntax</h3>
<pre> border-width:  &lt;border-width&gt; {1,4}
</pre>
<h3>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></dd> <dt>thin </dt> <dd>Depends on the UA. Typically <strong>1px</strong> in desktop browsers like Firefox and IE 8.<strong> 2px </strong>in IE 4-7. </dd> <dt> medium </dt> <dd>Depends on the UA. Typically <strong>3px</strong> in desktop browsers like Firefox and IE 8.<strong> 4px </strong>in IE 4-7. </dd> <dt> thick </dt> <dd>Depends on the UA. Typically <strong>5px</strong> in desktop browsers like Firefox and IE 8.<strong> 6px </strong>in IE 4-7.</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>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>Examples</h3>
<pre style="border:ridge #ccc; border-width:6px">border: ridge #ccc;
border-width: 6px;  /* same as "<strong>border: ridge #ccc 6px</strong>";  5px 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>
<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> Working draft</li>
</ul>
<h3>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