border-bottom-color

Ü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 WertFalls der Wert durchscheinend ist, ist der berechnete Wert der entsprechende rgba() Wert. Falls nicht, ist er der entsprechende rgb() Wert. Das transparent Schlüsselwort wird zu rgb(0,0,0).
Animierbarja, als Farbe
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( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText

wobei
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

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

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,