CSS border-bottom-color Eigenschaft
Die CSS border-bottom-color Eigenschaft legt die Farbe des unteren Rahmens fest. Beispiele und interaktive Demo.
Die CSS-Eigenschaft border-bottom-color legt die Farbe des unteren Rahmens eines Elements fest. Sie gehört zu den vier Einzelseiten-Farbeigenschaften, zusammen mit border-top-color, border-right-color und border-left-color.
Ein Rahmen besteht aus drei Bestandteilen: einem Stil, einer Breite und einer Farbe. Ein Rahmen bleibt unsichtbar, bis ihm ein Stil zugewiesen wird. Daher hat border-bottom-color allein keine Wirkung. Bevor (oder zusammen mit) dieser Eigenschaft muss ein Stil über border-style oder border-bottom-style deklariert werden — andernfalls ist der Standardwert none und es wird kein Rahmen gezeichnet, unabhängig von der gesetzten Farbe.
Wann verwenden
Verwende border-bottom-color, wenn du nur den unteren Rand einfärben und die anderen drei Seiten unverändert lassen möchtest. Typische Anwendungsfälle:
- Überschriften und Links mit Unterstreichungsstil — ein unterer Rahmen, der sich bei
:hoveroder:focusumfärbt, ohne das Layout zu verschieben (im Gegensatz zutext-decoration). - Tab-Leisten und aktive Zustände — ein farbiger unterer Rahmen markiert den ausgewählten Tab.
- Neufärben einer Seite eines einheitlichen Rahmens — alle vier Seiten mit der Kurzschreibweise border-color setzen und den unteren Rahmen anschließend mit
border-bottom-colorüberschreiben.
Der Standardwert ist currentColor, was bedeutet, dass der Rahmen die Textfarbe des Elements übernimmt, wenn keine Farbe gesetzt wird. Die Farbe des unteren Rahmens kann auch als Teil der Kurzschreibweise border-color (ihr dritter Wert) oder der Kurzschreibweise border-bottom festgelegt werden.
| Anfangswert | currentColor |
|---|---|
| Gilt für | Alle Elemente. |
| Vererbbar | Nein |
| Animierbar | Ja. Die Farbe des unteren Rahmens ist animierbar. |
| Version | CSS1. |
| DOM-Syntax | object.style.borderBottomColor = "blue"; |
Syntax
Syntax der CSS border-bottom-color Eigenschaft
border-bottom-color: color | transparent | initial | inherit;Beispiel der border-bottom-color Eigenschaft:
Beispiel der CSS border-bottom-color Eigenschaft mit Farbwert
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom-style: solid;
border-bottom-color: #1c87c9;
border-bottom-width: 5px;
}
</style>
</head>
<body>
<h2> A heading with a solid blue bottom border</h2>
</body>
</html>Ergebnis
Beispiel der border-bottom-color Eigenschaft, bei dem verschiedenen HTML-Elementen Farben zugewiesen werden, um den Farbeffekt zu zeigen:
Beispiel der CSS border-bottom-color Eigenschaft mit der border-style Eigenschaft
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom-style: groove;
border-bottom-color: #8ebf42;
border-bottom-width: 5px;
}
div {
border-style: inset;
border-bottom-color: #ccc;
border-bottom-width: 8px;
}
p {
border-style: double;
border-bottom-color: #1c87c9;
border-bottom-width: 8px;
}
</style>
</head>
<body>
<h2>A heading with a groove green bottom border.</h2>
<div>A div element with an inset gray bottom border.</div>
<p>A paragraph with a double blue border.</p>
</body>
</html>Beispiel der border-bottom-color Eigenschaft mit dem Wert "transparent":
Beispiel der CSS border-bottom-color Eigenschaft mit dem Wert transparent
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: #666 dashed;
border-bottom-color: transparent;
padding: 8px;
}
</style>
</head>
<body>
<h2>Example of transparent border-bottom-color</h2>
<div>This is an example of a div element which has a transparent border-bottom-color.</div>
</body>
</html>Beachte, dass transparent nicht dasselbe ist wie das Fehlen eines Rahmens: Der untere Rahmen nimmt weiterhin den durch border-bottom-width definierten Platz ein, ist jedoch unsichtbar. Dies ist praktisch, um Layoutplatz zu reservieren, der bei Hover oder Fokus sichtbar gemacht wird.
Als Wert für die Eigenschaft border-bottom-color können hexadezimale Werte, RGB, RGBA, HSL, HSLA oder Farbnamen verwendet werden.
Erfahre mehr über HTML Colors.
Beispiel der border-bottom-color Eigenschaft mit dem Wert "color":
Beispiel der CSS border-bottom-color Eigenschaft mit hexadezimalen, RGB-, HSL- und benannten Farbwerten
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid #666;
width: 60%;
padding: 5px;
}
.name {
border-bottom-color: lightblue;
}
.hex {
border-bottom-color: #1c87c9;
}
.rgb {
border-bottom-color: rgba(0, 0, 0, 0.15);
}
.hsl {
border-bottom-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<p class="name">Bottom border with a named color.</p>
<p class="hex">Bottom border with a hexadecimal value.</p>
<p class="rgb">Bottom border with a RGB color value.</p>
<p class="hsl">Bottom border with a HSL color value.</p>
</body>
</html>border-bottom-color akzeptiert einen einzelnen Farbwert. Wenn mehrere Farben angegeben werden, wird nur der erste gültige Wert verwendet. Um alle vier Seiten gleichzeitig einzufärben, verwende stattdessen die Kurzschreibweise border-color.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| color | Gibt die Farbe des unteren Rahmens an. Die Standardfarbe ist die Farbe des Elements. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden. Erforderlicher Wert. | Ausprobieren » |
| transparent | Gibt an, dass die Rahmenfarbe transparent sein soll. Der untere Rahmen belegt weiterhin den durch den border-width-Wert definierten Platz. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
- border-bottom — Kurzschreibweise für Breite, Stil und Farbe des unteren Rahmens in einer Deklaration.
- border-bottom-style und border-bottom-width — die anderen beiden Bestandteile, die ein unterer Rahmen benötigt.
- border-color — legt die Farbe aller vier Seiten gleichzeitig fest.
- border-top-color, border-right-color, border-left-color — färbt die anderen drei Kanten ein.