CSS border-bottom-width-Eigenschaft
Die border-bottom-width-Eigenschaft legt die Breite der unteren Grenze fest.
Um die Wirkung von border-bottom-width zu sehen, müssen Sie auch eine border-style- oder border-bottom-style-Eigenschaft festlegen. Ohne einen Randstil hat die Breite keine sichtbare Wirkung.
Die Spezifikation definiert nicht die genaue Dicke für jedes Schlüsselwort; das genaue Ergebnis ist implementationsabhängig. Sie folgen jedoch immer dem Muster thin ≤ medium ≤ thick, und die Werte bleiben innerhalb eines einzelnen Dokuments konstant.
| Anfangswert | medium |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbbar | Nein. |
| Animierbar | Ja. Die Breite kann animiert werden. |
| Version | CSS1 |
| DOM-Syntax | object.style.borderBottomWidth = "5px"; |
Syntax
Syntax der CSS border-bottom-width-Eigenschaft
border-bottom-width: medium | thin | thick | length | initial | inherit;Beispiel für die border-bottom-width-Eigenschaft:
Beispiel für die CSS border-bottom-width-Eigenschaft mit dem Wert „thick“
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted;
border-bottom-width: thick;
}
</style>
</head>
<body>
<p>
As you can see, we used border-bottom-width property to set the width of bottom border of this element.
</p>
</body>
</html>Ergebnis
Beispiel für die border-bottom-width-Eigenschaft mit dem Wert „medium“:
Beispiel für die CSS border-bottom-width-Eigenschaft mit dem Wert „medium“
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
h2 {
border-bottom-style: groove;
border-bottom-width: medium;
}
div {
border-style: groove;
border-bottom-width: medium;
}
</style>
</head>
<body>
<h2>A heading with a medium bottom border.</h2>
<div>A div element with a medium bottom border.</div>
</body>
</html>Beispiel für die border-bottom-width-Eigenschaft, das den Unterschied zwischen den Werten „thin“ und „thick“ zeigt:
Beispiel für die CSS border-bottom-width-Eigenschaft mit dem Wert „thin“
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
h2 {
padding: 5px;
border-bottom-style: ridge;
border-bottom-width: thin;
border-color: #cccccc;
}
div {
padding: 5px;
border-style: ridge;
border-bottom-width: thick;
}
</style>
</head>
<body>
<h2>A heading with thin bottom border</h2>
<div>A div element with thick bottom border.</div>
</body>
</html>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| medium | Legt einen mittleren unteren Rand fest. Dies ist der Standardwert. | Ausführen » |
| thin | Legt einen dünnen unteren Rand fest. | Ausführen » |
| thick | Legt einen dicken unteren Rand fest. | Ausführen » |
| length | Legt die Breite des unteren Rands auf einen bestimmten Längenwert fest. | Ausführen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausführen » |
| inherit | Erbt den Eigenschaftswert vom Elternelement. |
Praxis
Welche der folgenden Werte werden von der border-bottom-width-Eigenschaft in CSS akzeptiert?