mozilla

Revision 20676 of border-width

  • Revision slug: CSS/border-width
  • Revision title: border-width
  • Revision id: 20676
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 209 words added, 81 words removed; page display name changed to 'border-width'

Revision Content

{{ CSSRef() }}

Summary

border-width 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

<border-width>
{{ Xref_csslength() }} | thin | medium | thick
One, two, three or four {{ Xref_csslength() }} values and/or keywords.
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.
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.

Related properties

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

 

Examples

{{ CSSRefExampleLink("border") }}

element {
    border: solid blue;
    border-width: 2px 4px;     /* 2px top and bottom border, 4px right an left border */
}

element { 
    border: solid red;
    border-width: medium 0 1px thick;  /* 3 different width, right side has no border */
}

Specifications

Browser Compatibility

Browser Lowest Version
Internet Explorer  
Firefox  
Netscape  
Opera  

 

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>border-width 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>
<dl><dt><strong>&lt;border-width&gt;</strong> </dt><dd> {{ Xref_csslength() }} | <code>thin | medium | thick </code><br>
One, two, three or four {{ Xref_csslength() }} values and/or keywords. <br>
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.</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.<br>
</dd><dt><a class="internal" href="/en/CSS/length" title="en/CSS/length">&lt;length&gt;</a></dt><dd>The border's thickness has an explicit value. Cannot be negative.</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>
<p> </p>
<h3 name="Examples">Examples</h3>
<p>{{ CSSRefExampleLink("border") }}</p>
<pre>element {
    border: solid blue;
    border-width: 2px 4px;     /* 2px top and bottom border, 4px right an left border */
}

element { 
    border: solid red;
    border-width: medium 0 1px thick;  /* 3 different width, right side has no border */
}
</pre>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS1#border-width">CSS 1</a></li> <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> </td> </tr> <tr> <td>Firefox</td> <td> </td> </tr> <tr> <td>Netscape</td> <td> </td> </tr> <tr> <td>Opera</td> <td> </td> </tr> </tbody>
</table>
<p> </p>
<h3 name="See_Also">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