border-bottom-style

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

Revision Content

{{template.CSSRef()}}

Summary

border-bottom-style sets the line style of the bottom border of a box.

  • Initial value: none
  • Applies to: all elements
  • Inherited: no
  • Percentages: N/A
  • Media: visual
  • Computed value: as specified

Syntax

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

<border-style> Values

none 
No border.
hidden 
Same as 'none', except in terms of border conflict resolution for table elements.
dotted 
Series of dots.
dashed 
Series of short dashes or line segments.
solid 
Single, straight, solid line.
double 
Two straight lines that add up to the pixel amount defined as border-width.
groove 
Carved effect.
ridge 
Opposite of 'groove'. The border appears 3D (coming out).
inset 
Makes the box appear embedded.
outset 
Opposite of 'inset'. Makes the box appear 3D (embossed).

CSS3-Only Values

dot-dash 
Alternating dots and dashes.
dot-dot-dash 
Two dots and dash throughout.
wave 
Wavy line.

Examples

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

element {
        border-bottom-size: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #000;
}

Notes

Unless a border-style value is set, your border will not appear because the default value is set to 'none.'

Specifications

Browser Compatibility

See Also

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

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p><code>border-bottom-style</code> sets the line style of the bottom border of a box.
</p>
<ul><li> Initial value: none
</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: as specified
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">border-bottom-style: &lt;border-style&gt; | inherit
</pre>
<h3 name=".3Cborder-style.3E_Values"> &lt;border-style&gt; Values </h3>
<dl><dt> none </dt><dd> No border.
</dd><dt> hidden </dt><dd> Same as 'none', except in terms of border conflict resolution for table elements.
</dd><dt> dotted </dt><dd> Series of dots.
</dd><dt> dashed </dt><dd> Series of short dashes or line segments.
</dd><dt> solid </dt><dd> Single, straight, solid line.
</dd><dt> double </dt><dd> Two straight lines that add up to the pixel amount defined as <code>border-width</code>.
</dd><dt> groove </dt><dd> Carved effect.
</dd><dt> ridge </dt><dd> Opposite of 'groove'.  The border appears 3D (coming out).
</dd><dt> inset </dt><dd> Makes the box appear embedded.
</dd><dt> outset </dt><dd> Opposite of 'inset'.  Makes the box appear 3D (embossed).
</dd></dl>
<h4 name="CSS3-Only_Values"> CSS3-Only Values </h4>
<dl><dt> dot-dash </dt><dd> Alternating dots and dashes.
</dd><dt> dot-dot-dash </dt><dd> Two dots and dash throughout.
</dd><dt> wave </dt><dd> Wavy line.
</dd></dl>
<h3 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("border")}}
</p>
<pre>element {
        border-bottom-size: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #000;
}
</pre>
<h3 name="Notes"> Notes </h3>
<p>Unless a border-style value is set, your border will not appear because the default value is set to 'none.'
</p>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#border-style">CSS 1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom-style">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#border-style">CSS 3</a>
</li></ul>
<h3 name="Browser_Compatibility"> Browser Compatibility </h3>
<h3 name="See_Also"> See Also </h3>
<p><b>border-bottom-style</b>, <a href="en/CSS/border-bottom">border-bottom</a>, <a href="en/CSS/border-bottom-color">border-bottom-color</a>, <a href="en/CSS/border-bottom-width">border-bottom-width</a>
</p>
Revert to this revision