CSS border-bottom-color-Eigenschaft
Die CSS-Eigenschaft border-bottom-color wird verwendet, um die Farbe des unteren Rands eines Elements festzulegen.
Zuerst müssen Sie die border-style oder die border-bottom-style Eigenschaften definieren, da ein Element einen border haben muss, bevor Sie die Farbe ändern können.
Die Farbe des unteren Rands kann auch mit der Shorthand-Eigenschaft border-color definiert werden.
| Anfangswert | currentColor |
|---|---|
| Gilt für | Alle Elemente. |
| Vererbbar | Nein |
| Animierbar | Ja. Die Farbe des unteren Rands 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 für die 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 für die border-bottom-color-Eigenschaft, bei dem Farben zu verschiedenen HTML-Elementen hinzugefügt werden, um den Farbeffekt zu zeigen:
Beispiel der CSS border-bottom-color-Eigenschaft mit 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 für die border-bottom-color-Eigenschaft mit dem Wert „transparent“:
Beispiel der CSS border-bottom-color-Eigenschaft mit transparentem Wert
<!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>Sie können hexadezimale Werte, RGB, RGBA, HSL, HSLA oder Farbnamen als Wert für die border-bottom-color-Eigenschaft festlegen.
Erfolg
Erfahren Sie mehr über HTML-Farben.
Beispiel für die border-bottom-color-Eigenschaft mit dem Wert „color“:
Beispiel der CSS border-bottom-color-Eigenschaft mit hexadezimalem, RGB-, HSL- und benanntem Farbwert
<!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>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| color | Gibt die Farbe des unteren Rands an. Standardfarbe ist die Farbe des Elements. Es können Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() verwendet werden. Erforderlicher Wert. | Ausführen » |
| transparent | Gibt an, dass die Randfarbe transparent sein soll. Der untere Rand nimmt weiterhin den durch den border-width-Wert definierten Raum ein. | Ausführen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausführen » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Praxis
Was bewirkt die CSS-Eigenschaft 'border-bottom-color'?