CSS border-bottom-style-Eigenschaft
Die CSS-Eigenschaft border-bottom-style wird verwendet, um den Stil des unteren Rahmens festzulegen.
Die Eigenschaft border-bottom-style ist nicht sichtbar, es sei denn, border-bottom-width und border-bottom-color (oder die Kurzschreibweisen border-bottom/border) werden ebenfalls angegeben.
INFO
Beachten Sie, dass die Spezifikation nicht definiert, wie Ränder unterschiedlicher Stile in den Ecken verbunden werden.
| Anfangswert | none |
|---|---|
| Anwendbar auf | Alle Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS1 |
| DOM-Syntax | object.style.borderBottomStyle = "dotted"; |
Syntax
Syntax der CSS border-bottom-style-Eigenschaft
border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Beispiel zur border-bottom-style-Eigenschaft:
Beispiel für die CSS border-bottom-style-Eigenschaft mit den Werten solid und dashed
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
border-bottom-style: solid;
}
div {
border-bottom-style: dashed;
}
</style>
</head>
<body>
<h2>A heading with a solid bottom border</h2>
<div>A div element with a dashed bottom border.</div>
</body>
</html>Ergebnis
Beispiel zur border-bottom-style-Eigenschaft mit mehreren Werten:
Beispiel für die CSS border-bottom-style-Eigenschaft mit den Werten double, dashed und groove
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</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>A heading with a double bottom border</h2>
<p> A paragraph with a dashed bottom border. </p>
<div>A div element with a groove bottom border.</div>
</body>
</html>Beispiel zur border-bottom-style-Eigenschaft mit dem Wert „hidden“:
Beispiel für die border-bottom-style-Eigenschaft mit dem Wert „hidden“:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
text-align: center;
border: 5px solid black;
border-bottom-style: hidden;
}
</style>
</head>
<body>
<h1>Examples with border-bottom-style property</h1>
</body>
</html>Beispiel zur border-bottom-style-Eigenschaft mit dem Wert „inset“:
Beispiel für die border-bottom-style-Eigenschaft mit dem Wert „inset“:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
text-align: center;
border: 5px solid;
border-bottom-style: inset;
}
</style>
</head>
<body>
<h1>Examples with border-bottom-style property</h1>
</body>
</html>Beispiel zur border-bottom-style-Eigenschaft mit dem Wert „outset“:
Beispiel für die border-bottom-style-Eigenschaft mit dem Wert „outset“:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
text-align: center;
border: 5px solid;
border-bottom-style: outset;
}
</style>
</head>
<body>
<h1>Examples with border-bottom-style property</h1>
</body>
</html>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| none | Zeigt keinen Rand. Standardwert. | Ausführen » |
| hidden | Wie „none“, außer bei der Auflösung von Randkonflikten bei Tabellenelementen. | Ausführen » |
| dotted | Der Rand wird als Reihe von Punkten dargestellt. | Ausführen » |
| dashed | Der Rand wird als Reihe von Strichen dargestellt. | Ausführen » |
| solid | Der Rand wird als durchgezogene Linie dargestellt. | Ausführen » |
| double | Der Rand wird als zwei durchgezogene Linien dargestellt. | Ausführen » |
| groove | 3D-Effekt mit gerilltem Rand, der den Eindruck erweckt, der Rand sei eingemeißelt. Gegenteil von ridge. | Ausführen » |
| ridge | 3D-Effekt mit erhabenem Rand, der den Eindruck erweckt, der Rand sei aufgewölbt. Gegenteil von groove. | Ausführen » |
| inset | 3D-Effekt, der den Eindruck erweckt, das Element sei eingedrückt. Gegenteil von outset. | Ausführen » |
| outset | 3D-Effekt, der den Eindruck erweckt, das Element sei aufgewölbt. Gegenteil von inset. | Ausführen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausführen » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Praxis
Welche der folgenden sind gültige Werte für die border-bottom-style-Eigenschaft in CSS?