Die Eigenschaft border-left-color definiert die Farbe des linken Randes eines Elements.
Die Farbe des linken Randes zusammen mit den Farben des oberen, rechten und unteren Randes kann auch mit der shorthand Eigenschaft border-color definiert werden.
Wenn Sie die Eigenschaft border-left-color verwenden, sollen Sie zunächst die Eigenschaft border-style oder border-left-style einstellen und dann die Farbe des definierten Styles ändern.
Die Standardbreite eines Rahmens ist medium. Sie können die Breite entweder über die Eigenschaften border-width oder border-left-width angeben.
| Anfangswert | currentColor |
| Gilt für | Alle Elemente. Es gilt auch für ::first-letter. |
| Geerbt | Nein |
| Animierbar | Ja. Die Farbe des linken Randes ist animierbar. |
| Version | CSS1 |
| DOM Syntax | object.style.borderLeft = "1px solid black"; |
Syntax
border-left-color: color | transparent | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
width: 300px;
padding: 20px;
border-style: solid;
border-color: #666;
border-left-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Beispiel für border-right-color</h2>
<div>Ein Beispiel für die Eigenschaft border-right-color mit unterschiedlicher Farbe des rechten Randes.</div>
</body>
</html>Betrachten Sie ein weiteres Beispiel, bei dem der Wert für den linken Rand auf transparent gesetzt ist.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
h2 {
padding: 3px;
text-align: center;
border: 15px ridge #8ebf42;
border-left-color: transparent;
}
</style>
</head>
<body>
<h2>Eine Überschrift mit einem transparenten linken Rand</h2>
</body>
</html>Betrachten Sie ein CSS-Beispiel für border-left-color, wo der Wert eine benannte Farbe ist:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: darkred;
}
</style>
</head>
<body>
<div>Border-left-color Eigenschaft mit einem benannten Farbwert.</div>
</body>
</html>Sehen Sie ein Beispiel, wo ein hexadezimaler Wert für die Eigenschaft border-left-color eingestellt ist:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: #1c87c9;
}
</style>
</head>
<body>
<div>Die Eigenschaft Border-left-color mit einem hexadezimalen Wert.</div>
</body>
</html>Sehen Sie ein Beispiel mit border-left-color mit einem RGB-Wert:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div>Die Eigenschaft Border-left-color mit einem RGB-Wert.</div>
</body>
</html>Sehen Sie ein Beispiel mit border-left-color mit einem HSL-Wert:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<div>Die Eigenschaft Border-left-color mit einem HSL-Wert.</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| color | Es definiert die Farbe des linken Randes. Die Standardfarbe ist die Farbe des aktuellen Elements. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden. Obligatorisher Wert. |
| transparent | Es wendet eine transparente Farbe auf den linken Rand an. Der linke Rand nimmt weiterhin den durch den Wert border-width definierten Platz ein. |
| initial | Es setzt die Eigenschaft auf den Standardwert. |
| inherit | Es erzeugt die Eigenschaft von ihrem übergeordneten Element. |
Browser-Support
|
|
|
|
|---|---|---|---|
| 1+ | 1+ | 1+ | 3.5+ |
Übe dein Wissen
