CSS border-color-Eigenschaft
Die CSS border-color-Eigenschaft legt die Farbe der vier Seiten des Rahmens eines Elements fest. Sie entspricht den folgenden Eigenschaften:
Jede Seite kann einen eigenen Wert haben. Die border-color-Eigenschaft wird zusammen mit der border-style-Eigenschaft verwendet. Wenn die border-width 0 beträgt oder border-style auf none oder hidden gesetzt ist, ist die Rahmenfarbe nicht sichtbar.
Diese Eigenschaft akzeptiert jeden CSS-Farbwert. Die Standardfarbe ist die aktuelle Farbe des Elements.
Die border-color-Eigenschaft kann 4 Werte annehmen. Wenn sie einen Wert hat, wird die Farbe auf alle vier Seiten angewendet. Wenn sie zwei Werte hat, wird der erste Wert auf die oberen und unteren Seiten und der zweite Wert auf die rechten und linken Seiten gesetzt. Wenn sie drei Werte hat, wird der erste auf die obere Seite, der zweite auf die rechten und linken Seiten und der dritte auf die untere Seite angewendet. Wenn sie vier Werte hat, wird der erste auf die obere, der zweite auf die rechte, der dritte auf die untere und der vierte auf die linke Seite gesetzt.
| Anfangswert | currentColor |
|---|---|
| Anwendbar auf | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbbar | Nein. |
| Animierbar | Ja. Die Rahmen der Box sind animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.borderColor = "red"; |
Syntax
Syntax der CSS border-color-Eigenschaft
border-color: color | transparent | initial | inherit;Hier sehen wir ein Beispiel, bei dem nur ein Wert angewendet wird. Damit wird die Farbe auf alle vier Seiten des Elements gesetzt.
Beispiel zur border-color-Eigenschaft:
Beispiel der CSS border-color-Eigenschaft mit nur einem Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.dotted {
border-style: dotted;
border-color: #1c87c9;
padding: 5px;
}
</style>
</head>
<body>
<div class="dotted">Example with blue dotted border.</div>
</body>
</html>Ergebnis
Sehen wir uns ein weiteres Beispiel an, bei dem vier Werte angewendet werden. Der erste Wert wird auf die obere Seite angewendet, der zweite auf die rechte, der dritte auf die untere und der vierte auf die linke Seite.
Beispiel zur border-color-Eigenschaft mit 4 Werten:
Beispiel der CSS border-color-Eigenschaft mit 4 Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.solid {
border-style: solid;
border-color: #1c87c9 cyan yellow #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<div class="solid">Example with border-color property.</div>
</body>
</html>Sie können hexadezimale Werte, RGB, RGBA, HSL, HSLA oder Farbnamen als Wert für die border-color-Eigenschaft festlegen.
Erfolg
Erfahren Sie mehr über HTML-Farben.
Beispiel zur border-color-Eigenschaft mit dem Wert "color":
Beispiel der CSS border-color-Eigenschaft mit hexadezimalen, RGB-, HSL- und Farbnamen-Werten
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid #666;
width: 60%;
padding: 5px;
}
.name {
border-color: lightblue;
}
.hex {
border-color: #1c87c9;
}
.rgb {
border-color: rgba(0, 0, 0, 0.15);
}
.hsl {
border-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<p class="name">Border with a named color.</p>
<p class="hex">Border with a hexadecimal value.</p>
<p class="rgb">Border with a RGB color value.</p>
<p class="hsl">Border with a HSL color value.</p>
</body>
</html>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| color | Legt eine Farbe für die Rahmen fest. Die Standardfarbe ist die aktuelle Farbe des Elements. Es können Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() verwendet werden. Optional. Standardwert ist currentColor. | Ausführen » |
| transparent | Macht die Rahmenfarbe transparent. | Ausführen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausführen » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Practice
Welche der folgenden Aussagen sind über die 'border-color'-Eigenschaft in CSS korrekt?