Die CSS-Eigenschaft border-bottom-style wird verwendet, um den Stil des unteren Randes des Elements anzugeben..
Ohne den Stil der Eigenschaft border-bottom oder border zu erwähnen, wird border-bottom-style nicht angezeigt.
Bemerken Sie bitte, dass die Spezifikation nicht definiert, wie die Grenzen verschiedener Stile in den Ecken zusammenhängen.
| Anfangswert | none |
| Gilt für | Alle Elemente. |
| Geerbt | Nein |
| Animierbar | Nein |
| Version | CSS1 |
| DOM Syntax | object.style.borderBottomStyle = "dotted"; |
Syntax
border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<title>Der Titel des Dokuments</title>
<head>
<style>
h2 {
border-bottom-style: solid;
}
div {
border-bottom-style: dashed;
}
</style>
</head>
<body>
<h2>Eine Überschrift mit einem festen unteren Rand</h2>
<div>Ein Element div mit einem gestrichelten unteren Rand.</div>
</body>
</html>Betrachten wir ein anderes Beispiel mit verschiedenen Stilen von border-bottom.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
h2 {
border-bottom-style: double;
}
p {
border-style: solid;
border-bottom-style: dashed;
}
div {
border-bottom-style: groove;
border-bottom-width: 8px;
}
</style>
</head>
<body>
<h2>Eine Überschrift mit einem doppelten unteren Rand.</h2>
<p> Ein Absatz mit einem gestrichelten unteren Rand.</p>
<div>Ein Element div mit einem unteren Nutrand.</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| none | Es zeigt keine Grenzen. Es ist der Standardwert. |
| hidden | Das gleiche wie "none", , außer bei der Lösung von Grenzkonflikten für Tabellenelemente. |
| dotted | Der Rahmen wird als eine Reihe von Punkten angegeben. |
| dashed | Der Rahmen wird als eine Reihe von Bindestrichen angegeben. |
| solid | Der Rand wird als durchgezogene Linien angegeben. |
| double | er Rand wird als doppelte durchgezogene Linien angegeben. |
| groove | Es ist eine 3D gerillte Kante und erweckt den Eindruck, dass die Kante geschnitzt ist. Gegenüber von ridge. |
| ridge | Es gibt einen 3D-Rand an und erweckt den Eindruck eines extrudierten Aussehens. Gegenüber der Nut. |
| inset | Es ist ein 3D-Effekt, der den Eindruck erweckt, dass das Element eingebettet erscheint. Gegenteilig zu outset. |
| outset | Es ist ein 3D-Effekt, der den Eindruck erweckt, dass das Element eingebettet erscheint. Gegenteilig zu inset. |
| initial | Es setzt die Eigenschaft auf seinen Standardwert. |
| inherit | Es erbt die Eigenschaft von ihrem übergeordneten Element. |
Browser-Support
|
|
|
|
|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 9.2+ |
Übe dein Wissen
Welche Werte können für die CSS-Eigenschaft border-bottom-style verwendet werden?
Richtig!
Falsch!