CSS border-left-Eigenschaft
Die CSS border-left-Eigenschaft wird verwendet, um die Breite, die Linienart und die Farbe der linken Grenze von Elementen festzulegen.
Es ist eine Kurzschreibweise (Shorthand-Eigenschaft) zur Angabe der folgenden Werte:
Diese drei Werte der Kurzschreibweise können in beliebiger Reihenfolge angegeben werden, und einer oder zwei von ihnen können fehlen.
Wenn keine Farbe angegeben ist, wird der Wert aus der color-Eigenschaft übernommen. Wenn die color-Eigenschaft nicht definiert ist, wird standardmäßig die aktuelle Farbe verwendet.
Wenn die width nicht angegeben ist, wird die mittlere Größe des Elements verwendet.
| Anfangswert | medium none currentColor |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbt | Nein |
| Animierbar | Ja. Die Farbe und Breite der Grenze sind animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.borderLeft = "1px solid black"; |
Syntax
Syntax von border-left
border-left: border-width border-style border-color | initial | inherit;Beispiel für die border-left-Eigenschaft:
Beispiel für die CSS border-left-Eigenschaft mit solid-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border-left: 3px solid #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Border-left example</h2>
<div> This is a simple example for the border-left property.</div>
</body>
</html>Ergebnis
Beispiel für die border-left-Eigenschaft, die auf verschiedene Elemente angewendet wird:
Beispiel für die CSS border-left-Eigenschaft mit dotted-, double- und solid-Werten
<!DOCTYPE html>
<html>
<head>
<style>
h1,
p,
div {
padding: 10px;
}
h1 {
border-left: 5px solid #8ebf42;
}
p {
border-left: 4px dotted #1c87c9;
}
div {
border-left: thick double #666;
}
</style>
</head>
<body>
<h1>A heading with a solid green left border</h1>
<p>A heading with a dotted blue left border.</p>
<div>A div element with a thick double left border.</div>
</body>
</html>Erstellen Sie eine Box mit dem <div>-Element und legen Sie eine background-color für Ihre Box und die linke Grenze fest.
Beispiel für die border-left-Eigenschaft mit dem <div>-Element:
Beispiel für die CSS border-left-Eigenschaft mit ridge-Wert
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-left: 20px ridge #8ebf42;
background-color: #ccc;
height: 100px;
width: 200px;
font-weight: bold;
text-align: center;
padding: 3px;
}
</style>
</head>
<body>
<div>
<p>This box has a ridge border on the left side.</p>
</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| border-left-width | Legt die Breite der linken Grenze eines Elements fest. Der Standardwert ist "medium". Erforderlicher Wert. |
| border-left-style | Legt die Linienart der linken Grenze eines Elements fest. Der Standardwert ist "none". Erforderlicher Wert. |
| border-left-color | Legt die Farbe der linken Grenze eines Elements fest. Der Standardwert ist die aktuelle Textfarbe. |
| initial | Legt die Eigenschaft auf ihren Standardwert fest. |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Was bewirkt die border-left-Eigenschaft in CSS?