---
title: border-bottom-style
slug: Web/CSS/border-bottom-style
tags:
  - CSS
  - CSS Referenz
translation_of: Web/CSS/border-bottom-style
---
<p>{{CSSRef}}</p>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <code>border-bottom-style</code> Eigenschaft legt die Rahmenart des unteren Rahmens fest.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="eval">border-bottom-style: {{csssyntax("border-bottom-style")}}
</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt>none</dt>
 <dd>Standardwert. Es wird kein unterer Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.</dd>
 <dt>hidden</dt>
 <dd>Genau wie bei <code>none</code> wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.<br>
 Wenn <a href="/de/CSS/border-collapse" title="de/CSS/border-collapse"><code>border-collapse: collapse</code></a> gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.</dd>
 <dt>dotted</dt>
 <dd>Punktierte Linie.</dd>
 <dt>dashed</dt>
 <dd>Gestrichelte Linie.</dd>
 <dt>solid</dt>
 <dd>Durchgehende Linie.</dd>
 <dt>double</dt>
 <dd>Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der <a href="/De/CSS/Border-bottom-width" title="De/CSS/Border-bottom-width"><code>border-bottom-width</code></a> Angabe groß.</dd>
 <dt>groove</dt>
 <dd>Der Rahmen wirkt eingekerbt (3D-Effekt).</dd>
 <dt>ridge</dt>
 <dd>Der Rahmen wirkt wie eine Kante (3D-Effekt).</dd>
 <dt>inset</dt>
 <dd>Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).</dd>
 <dt>outset</dt>
 <dd>Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).</dd>
 <dt>inherit</dt>
 <dd>Der Wert des Elternelements wird geerbt.</dd>
</dl>

<h2 id="Beispiele">Beispiele</h2>

<pre>.beispielEins {
  border-bottom-style: dashed;      /* gestrichelt */
}

.beispielZwei {
  border-bottom-style: groove;      /* Einkerbung */
}

.beispielDrei {
 border-bottom-style: hidden;       /* Collapsing Border Model */
 border-collapse: collapse;
}
</pre>

<h2 id="Specifications" name="Specifications">Spezifikation</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Anmerkung</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Backgrounds', '#border-bottom-style', 'border-bottom-style') }}</td>
   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
   <td>keine Änderung</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Standardwert definiert</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Kompatibilität</h2>

{{Compat("css.properties.border-bottom-style")}}

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-color") }}, and {{ Cssxref("border-bottom-width") }}</li>
 <li>{{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-top-style") }}, and {{ Cssxref("border-style") }}</li>
</ul>