mozilla

Revision 20990 of border-bottom-width

  • Revision slug: CSS/border-bottom-width
  • Revision title: border-bottom-width
  • Revision id: 20990
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 7 words added, 3 words removed

Revision Content

{{ CSSRef() }}

Summary

The border-bottom-width CSS property sets the width of the bottom border of a box.

  • {{ Xref_cssinitial() }}: 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-bottom-width: border-width   or
border-bottom-width: inherit

<border-width> Values

thin
A thin border.
medium
A medium border.
thick
A thick border.
<length>
The border's thickness has an explicit value. Explicit border widths cannot be negative.

Note: An em value is also supported.

Related properties

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

 

Examples

{{ CSSRefExampleLink("border") }}

element { 
    border-bottom-width: thin;
    border-bottom-style: solid;
    border-bottom-color: #000;
}

Specifications

Browser Compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See Also

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

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>The <code>border-bottom-width</code> <a href="/en/CSS" title="CSS">CSS</a> property sets the width of the bottom border of a box.</p>
<ul> <li>{{ Xref_cssinitial() }}: <code>medium</code></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>
<h2 name="Syntax">Syntax</h2>
<pre class="eval">border-bottom-width: <em>border-width</em>   or
border-bottom-width: inherit
</pre>
<h3 name=".3Cborder-width.3E_Values">&lt;border-width&gt; Values</h3>
<dl> <dt>thin</dt> <dd>A thin border.</dd> <dt>medium</dt> <dd>A medium border.</dd> <dt>thick</dt> <dd>A thick border.</dd> <dt>&lt;length&gt;</dt> <dd>The border's thickness has an explicit value. Explicit border widths cannot be negative.</dd>
</dl>
<p>Note: An <code>em</code> value is also supported.</p>
<h3 name="Related_properties">Related properties</h3>
<ul> <li>{{ Cssxref("border-left-width") }}</li> <li>{{ Cssxref("border-right-width") }}</li> <li>{{ Cssxref("border-top-width") }}</li> <li>{{ Cssxref("border-width") }}</li>
</ul>
<p> </p>
<h3 name="Examples">Examples</h3>
<p>{{ CSSRefExampleLink("border") }}</p>
<pre>element { 
    border-bottom-width: thin;
    border-bottom-style: solid;
    border-bottom-color: #000;
}
</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">CSS 2.1</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-width">CSS 3</a></li>
</ul>
<h3 name="Browser_Compatibility">Browser Compatibility</h3>
<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 (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>1.0</td> <td>1.0 (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 Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3 name="See_Also">See Also</h3>
<p>{{ Cssxref("border") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-color") }},</p>
<p>{{ languages( { "de": "de/CSS/border-bottom-width", "fr": "fr/CSS/border-bottom-width", "ja": "ja/CSS/border-bottom-width", "pl": "pl/CSS/border-bottom-width", "es": "es/CSS/border-bottom-width" } ) }}</p>
Revert to this revision