CSS border-left-style-Eigenschaft
Die CSS-Eigenschaft border-left-style legt den Stil der linken Grenze eines Elements fest. Sie wird als einzelnes Schlüsselwort definiert, das aus den für die border-style verfügbaren Werten ausgewählt wird. Im Gegensatz zu border-style, das den Stil für alle vier Seiten festlegt, legt border-left-style den Stil nur für die linke Grenze fest.
Die Standardbreite der linken Grenze beträgt „medium“. Sie kann entweder mit der border-left-width oder border-width geändert werden.
Nicht alle Browser rendern die Stile auf die gleiche Weise. Beispielsweise rendert Chrome die Punkte als rechteckige Punkte, nicht als kreisförmige.
INFO
Die Spezifikation gibt keine genaue Angabe zum Abstand zwischen den Punkten und den Strichen.
INFO
Die Spezifikation definiert nicht, wie sich Grenzen unterschiedlicher Stile in den Ecken verbinden.
| Anfangswert | none |
|---|---|
| Anwendbar auf | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbbar | Nein |
| Animierbar | Nein |
| Version | CSS1 |
| DOM-Syntax | object.style.borderLeftStyle = "solid"; |
Syntax
Syntax der CSS border-left-style-Eigenschaft
border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Beispiel für die border-left-style-Eigenschaft:
Beispiel der CSS border-left-style-Eigenschaft mit den Werten solid und dotted
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-left-style: solid;
}
div {
border-left-style: dotted;
}
</style>
</head>
<body>
<p> Example with solid border-left-style.</p>
<div>Example with dotted border-left-style.</div>
</body>
</html>INFO
Je nach Wert von border-color können die Effekte der Werte groove, ridge, inset und outset geändert werden.
Beispiel der border-left-style-Eigenschaft mit allen Werten:
Beispiel der CSS border-left-style-Eigenschaft mit den Werten hidden, dotted, dashed, solid, double, groove, ridge, inset und outset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #c9c5c5;
font-size: 20px;
text-align: center;
}
main div {
display: flex;
align-items: center;
justify-content: center;
color: black;
padding-top: 30px;
padding-bottom: 30px;
width: 200px;
height: 100px;
margin: 15px;
font-weight: bold;
background-color: #8ebf42;
border: 10px solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-left-style example classes */
.b1 {
border-left-style: hidden;
}
.b2 {
border-left-style: dotted;
}
.b3 {
border-left-style: dashed;
}
.b4 {
border-left-style: solid;
}
.b5 {
border-left-style: double;
}
.b6 {
border-left-style: groove;
}
.b7 {
border-left-style: ridge;
}
.b8 {
border-left-style: inset;
}
.b9 {
border-left-style: outset;
}
</style>
</head>
<body>
<h1>Border-left-style value examples</h1>
<main class="flex-center">
<div class="b1">
hidden
</div>
<div class="b2">
dotted
</div>
<div class="b3">
dashed
</div>
</main>
<main class="flex-center">
<div class="b4">
solid
</div>
<div class="b5">
double
</div>
<div class="b6">
groove
</div>
</main>
<main class="flex-center">
<div class="b7">
ridge
</div>
<div class="b8">
inset
</div>
<div class="b9">
outset
</div>
</main>
</body>
</html>Ergebnis
Werte
| Wert | Beschreibung | Testen |
|---|---|---|
| none | Definiert, dass keine Grenze angezeigt wird. Standardwert. | |
| hidden | Wie none, außer bei der Auflösung von Grenzkonflikten bei Tabellenelementen, wobei die linke Grenze vollständig aus dem Rendering entfernt wird. | |
| dotted | Definiert eine gepunktete Grenze. | |
| dashed | Definiert eine gestrichelte Grenze. | |
| double | Definiert eine doppelte Grenze. | |
| solid | Definiert eine durchgehende Grenze. | |
| groove | Definiert eine 3D-Nut. Der Effekt kann mit dem Wert von border-color geändert werden. | |
| ridge | Definiert eine 3D-Wulst. Der Effekt kann mit dem Wert von border-color geändert werden. | |
| inset | Definiert eine 3D-Einbindung. Der Effekt kann mit dem Wert von border-color geändert werden. | |
| outset | Definiert eine 3D-Ausbindung. Der Effekt kann mit dem Wert von border-color geändert werden. | |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Practice
Welche Werte kann die 'border-left-style'-Eigenschaft in CSS annehmen?