border-bottom-width

  • Revision slug: CSS/border-bottom-width
  • Revision title: border-bottom-width
  • Revision id: 20971
  • Created:
  • Creator: Rappo
  • Is current revision? No
  • Comment /* Examples */

Revision Content

{{template.CSSRef()}}

Summary

border-bottom-width sets the width of the bottom border of a box.

  • Initial value: medium
  • Applies to: all elements
  • Inherited: no
  • Percentages: N/A
  • Media: visual
  • Computed value: absolute length; '0' if the border style is 'none' or 'hidden'

Syntax

border-bottom-width: <border-width> | inherit

<border-style> 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.

Examples

{{template.CSSRefExampleLink("border")}}

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

Specifications

Browser Compatibility

See Also

border-bottom-width, border-bottom, border-bottom-style, border-bottom-color

Revision Source

<p> 
{{template.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> Initial value: medium
</li><li> Applies to: all elements
</li><li> Inherited: no
</li><li> Percentages: N/A
</li><li> Media: <a href="en/CSS/Media/Visual">visual</a>
</li><li> Computed value: 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-style.3E_Values"> &lt;border-style&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>
<h3 name="Examples"> Examples </h3>
<p>{{template.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/2005/WD-css3-background-20050216/#border-width">CSS 3</a>
</li></ul>
<h3 name="Browser_Compatibility"> Browser Compatibility </h3>
<h3 name="See_Also"> See Also </h3>
<p><a href="en/CSS/border-bottom-width">border-bottom-width</a>, <a href="en/CSS/border-bottom">border-bottom</a>, <a href="en/CSS/border-bottom-style">border-bottom-style</a>, <a href="en/CSS/border-bottom-color">border-bottom-color</a>
</p>
Revert to this revision