Übersicht

Die border-bottom-color CSS Eigenschaft legt die Farbe des unteren Rahmens eines Elements fest. Beachte, dass in vielen Fällen die Kurzschreibweisen border-color oder border-bottom geeigneter und daher zu bevorzugen sind.

Initialwertcurrentcolor
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter.
VererbtNein
Medienvisuell
Berechneter Wertberechnete Farbe
AnimationstypFarbe
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

border-bottom-color: yellow;
border-bottom-color: #F5F6F7;

Werte

<color>
Ist ein <color> CSS Wert, der die Farbe des unteren Rahmens beschreibt.
inherit
Ist ein Schlüsselwort, das die Farbe des unteren Rahmens des Elternelements kennzeichnet (welche sich vom Standardwert von border-bottom-color unterscheiden kann).

Formale Syntax

<color>

wobei
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

wobei
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )

wobei
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Beispiele

Ein einfacher div mit einem Rahmen

HTML Inhalt

<div class="mybox">
    <p>Dies ist eine Box mit einem Rahmen außenrum.
       Beachte welche Seite der Box 
       <span class="redtext">rot</span> ist.</p>
</div>

CSS Inhalt

.mybox {
    border: solid 0.3em gold;
    border-bottom-color: red;
    width: auto;
}
.redtext {
    color: red;
}

Ergebnis

Spezifikationen

Spezifikation Status Anmerkung
CSS Backgrounds and Borders Module Level 3
Die Definition von 'border-bottom-color' in dieser Spezifikation.
Anwärter Empfehlung Keine nennenswerten Änderungen, jedoch wurde das Schlüsselwort transparent entfernt, das nun in <color> beinhaltet ist, welcher erweitert wurde.
CSS Level 2 (Revision 1)
Die Definition von 'border-bottom-color' in dieser Spezifikation.
Empfehlung Erstmalige Definition

Browser Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung 1.0 1.0 (1.7 oder früher)[1] 4 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung 1.0 1.0 (1.0)[1] 6.5 11 1.0

[1] Gecko-basierte Browser wie Firefox unterstützen ebenfalls die nicht standardisierte -moz-border-bottom-colors CSS Eigenschaft, die mehrere Farben für den unteren Rand setzt.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: Sebastianz, fscholz, SJW, Yuichiro, Michael2402
Zuletzt aktualisiert von: Sebastianz,