Ü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.
| Initialwert | currentColor |
|---|---|
| Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter. |
| Vererbt | Nein |
| Medien | visuell |
| Berechneter Wert | Falls 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). |
| Animierbar | ja, als Farbe |
| Kanonische Reihenfolge | die 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-colorunterscheiden 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 | WindowTextwobei
<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
- Die rahmenbezogenen CSS Kurzschreibweise Eigenschaften
border,border-bottomundborder-color. - Die farbbezogenen CSS Eigenschaften, die sich auf die anderen Ränder beziehen:
border-right-color,border-top-colorundborder-left-color. - Die anderen rahmenbezogenen CSS Eigenschaften, die sich auf denselben Rand beziehen:
border-bottom-styleundborder-bottom-width.