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

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

<p>Die <code>border-bottom-color</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft legt die Farbe des unteren Rahmens eines Elements fest. Beachte, dass in vielen Fällen die Kurzschreibweisen {{cssxref("border-color")}} oder {{cssxref("border-bottom")}} geeigneter und daher zu bevorzugen sind.</p>

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

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

<pre class="brush: css">border-bottom-color: yellow;
border-bottom-color: #F5F6F7;
</pre>

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

<dl>
 <dt><code>&lt;color&gt;</code></dt>
 <dd>Ist ein {{cssxref("&lt;color&gt;")}} CSS Wert, der die Farbe des unteren Rahmens beschreibt.</dd>
 <dt><code>inherit</code></dt>
 <dd>Ist ein Schlüsselwort, das die Farbe des unteren Rahmens des Elternelements kennzeichnet (welche sich vom Standardwert von <code>border-bottom-color</code> unterscheiden kann).</dd>
</dl>

<h3 id="Formale_Syntax">Formale Syntax</h3>

{{csssyntax}}

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

<h3 id="Ein_einfacher_div_mit_einem_Rahmen">Ein einfacher div mit einem Rahmen</h3>

<h4 id="HTML_Inhalt">HTML Inhalt</h4>

<pre class="brush: html">&lt;div class="mybox"&gt;
    &lt;p&gt;Dies ist eine Box mit einem Rahmen außenrum.
       Beachte welche Seite der Box
       &lt;span class="redtext"&gt;rot&lt;/span&gt; ist.&lt;/p&gt;
&lt;/div&gt;</pre>

<h4 id="CSS_Inhalt">CSS Inhalt</h4>

<pre class="brush: css">.mybox {
    border: solid 0.3em gold;
    border-bottom-color: red;
    width: auto;
}
.redtext {
    color: red;
}</pre>

<h4 id="Ergebnis">Ergebnis</h4>

<p>{{EmbedLiveSample("Ein_einfacher_div_mit_einem_Rahmen")}}</p>

<h2 id="Spezifikationen">Spezifikationen</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-color", "border-bottom-color")}}</td>
   <td>{{Spec2("CSS3 Backgrounds")}}</td>
   <td>Keine nennenswerten Änderungen, jedoch wurde das Schlüsselwort <code>transparent</code> entfernt, das nun in {{cssxref("&lt;color&gt;")}} beinhaltet ist, welcher erweitert wurde.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS2.1", "box.html#border-color-properties", "border-bottom-color")}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Erstmalige Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

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

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

<ul>
 <li>Die rahmenbezogenen CSS Kurzschreibweise Eigenschaften {{Cssxref("border")}}, {{Cssxref("border-bottom")}} und {{Cssxref("border-color")}}.</li>
 <li>Die farbbezogenen CSS Eigenschaften, die sich auf die anderen Ränder beziehen: {{Cssxref("border-right-color")}}, {{Cssxref("border-top-color")}} und {{Cssxref("border-left-color")}}.</li>
 <li>Die anderen rahmenbezogenen CSS Eigenschaften, die sich auf denselben Rand beziehen: {{cssxref("border-bottom-style")}} und {{cssxref("border-bottom-width")}}.</li>
</ul>