mozilla

Revision 21022 of border-bottom-style

  • Revision slug: CSS/border-bottom-style
  • Revision title: border-bottom-style
  • Revision id: 21022
  • Created:
  • Creator: Yuichiro
  • Is current revision? No
  • Comment 18 words added, 4 words removed

Revision Content

{{ CSSRef() }}

Summary

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

  • {{ Xref_cssinitial() }}: {{ Cssxref("none") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: N/A
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: 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).

Related properties

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

Examples

{{ 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

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 5.5 9.2 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See Also

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

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

Revision Source

<p>{{ 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>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</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() }}: 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>
<h3 name="Related_properties">Related properties</h3>
<ul> <li>{{ Cssxref("border-left-style") }}</li> <li>{{ Cssxref("border-right-style") }}</li> <li>{{ Cssxref("border-top-style") }}</li> <li>{{ Cssxref("border-style") }}</li>
</ul>
<h3 name="Examples">Examples</h3>
<p>{{ 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/CSS21/box.html#propdef-border-bottom-style">CSS 2.1</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-style">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</th> </tr> <tr> <td>Basic support</td> <td>1.0</td> <td>1.0</td> <td>5.5</td> <td>9.2</td> <td>1.0</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-bottom-style") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-width") }},</p>
<p>{{ languages( { "de": "de/CSS/border-bottom-style", "es": "es/CSS/border-bottom-style", "fr": "fr/CSS/border-bottom-style", "ja": "ja/CSS/border-bottom-style", "pl": "pl/CSS/border-bottom-style" } ) }}</p>
Revert to this revision