CSS border-bottom-Eigenschaft
Die Eigenschaft border-bottom ist eine Shorthand-Eigenschaft zur Definition der Breite, des Stils und der Farbe des unteren Randes. Die Werte können in beliebiger Reihenfolge angegeben werden, die empfohlene Reihenfolge ist jedoch Breite, Stil und dann Farbe. Beachten Sie, dass border-style zwingend erforderlich ist, damit der Rand angezeigt wird; ohne ihn wird der Rand unabhängig von Farbe oder Breite nicht sichtbar.
Wird die Breite weggelassen, beträgt der Standardwert medium. Wird die Farbe weggelassen, wird die Farbe des Elternelements geerbt. Wird der Stil weggelassen, wird der Rand nicht angezeigt.
| Anfangswert | medium none currentColor |
|---|---|
| Gilt für | Alle Elemente. |
| Vererbt | Nein. |
| Animierbar | Ja. Die Farbe und die Breite des unteren Randes sind animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.borderBottom = "15px dotted blue"; |
Syntax
Syntax der CSS border-bottom-Eigenschaft
border-bottom: border-width | border-style | border-color | initial | inherit;Beispiel für die border-bottom-Eigenschaft:
Beispiel für die CSS border-bottom-Eigenschaft mit dem Wert groove
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 8px groove #1c87c9;
}
</style>
</head>
<body>
<h2>A heading with a groove blue bottom border.</h2>
</body>
</html>Ergebnis
Beispiel zur Verwendung der border-bottom-Eigenschaft mit <h2>, <p> und <div>-Elementen:
Beispiel für die CSS border-bottom-Eigenschaft mit den Werten dashed, double und ridge
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 5px dashed #1c87c9;
}
p {
border-bottom: 8px double #8ebf42;
}
div {
border-bottom: 10px ridge #ccc;
}
</style>
</head>
<body>
<h2>A heading with a dashed blue bottom border.</h2>
<p>A paragraph with a double green bottom border.</p>
<div>A div element with a ridge gray bottom border.</div>
</body>
</html>Ergebnis
Werte
| Wert | Beschreibung |
|---|---|
| border-bottom-style | Definiert den Stil des unteren Randes. Standardwert ist "none". |
| border-bottom-width | Definiert die Breite des unteren Randes. Standardwert ist "medium". |
| border-bottom-color | Definiert die Farbe des unteren Randes. Standardwert ist die Textfarbe. |
| initial | Legt die Eigenschaft auf ihren Standardwert fest. |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Übungen
Was bewirkt die CSS-Eigenschaft 'border-bottom'?