Revision 20984 of border-bottom-width

  • Revision slug: CSS/border-bottom-width
  • Revision title: border-bottom-width
  • Revision id: 20984
  • Created:
  • Creator: fscholz
  • Is current revision? No
  • Comment 1 words removed

Revision Content

{{ CSSRef() }}

Summary

border-bottom-width sets the width of the bottom 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-bottom-width: <border-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.
<percentage>
The border's thickness has a percentage value, percentages of the containing block's width. 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

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-bottom") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-color") }},

{{ languages( { "de": "de/CSS/border-bottom-width", "fr": "fr/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><code>border-bottom-width</code> sets the width of the bottom 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-bottom-width: &lt;border-width&gt; | 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> <dt>&lt;percentage&gt;</dt> <dd>The border's thickness has a percentage value, percentages of the containing block's width. 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>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari (Webkit)</td> <td>1.0 (85)</td> </tr> </tbody>
</table>
<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", "pl": "pl/CSS/border-bottom-width", "es": "es/CSS/border-bottom-width" } ) }}</p>
Revert to this revision