mozilla

Revision 21026 of border-bottom-style

  • Revision slug: CSS/border-bottom-style
  • Revision title: border-bottom-style
  • Revision id: 21026
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment one or more formatting changes

Revision Content

{{ CSSRef() }}

Summary

The border-bottom-style CSS property 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
Is a keyword describing the style of the bottom border. It can have the following values:
none   Displays 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>The <code>border-bottom-style</code> <a href="/en/CSS" title="CSS">CSS</a> property 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>
<dl> <dt><em>border-style</em></dt> <dd>Is a keyword describing the style of the bottom border. It can have the following values: <table class="standard-table"> <tbody> <tr> <td><code>none</code></td> <td> </td> <td>Displays no border</td> </tr> <tr> <td><code>hidden</code></td> <td> </td> <td>Same as 'none', except in terms of border conflict resolution for table elements.</td> </tr> <tr> <td><code>dotted</code></td> <td> </td> <td>Series of dots.</td> </tr> <tr> <td><code>dashed</code></td> <td> </td> <td>Series of short dashes or line segments.</td> </tr> <tr> <td><code>solid</code></td> <td> </td> <td>Single, straight, solid line.</td> </tr> <tr> <td><code>double</code></td> <td> </td> <td>Two straight lines that add up to the pixel amount defined as <code>border-width</code>.</td> </tr> <tr> <td><code>groove</code></td> <td> </td> <td>Carved effect.</td> </tr> <tr> <td><code>ridge</code></td> <td> </td> <td>Opposite of 'groove'. The border appears 3D (coming out).</td> </tr> <tr> <td><code>inset</code></td> <td> </td> <td>Makes the box appear embedded.</td> </tr> <tr> <td><code>outset</code></td> <td> </td> <td>Opposite of 'inset'. Makes the box appear 3D (embossed).</td> </tr> </tbody> </table> </dd> <br>
</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