CSS border-color Eigenschaft
Die CSS border-color ist eine Kurzschreibweise, die Farbe auf alle vier Seiten eines Elements anwendet. Werte und Beispiele.
Die CSS-Eigenschaft border-color legt die Farbe des Rahmens eines Elements fest. Sie ist eine Kurzschreibweise, mit der Sie die Farbe aller vier Seiten auf einmal setzen oder jeder Seite eine eigene Farbe geben können. Sie entspricht den vier Langform-Eigenschaften:
Diese Seite behandelt die Syntax, die ein- bis vierwertige Formen, die unterstützten Farbformate und die Fallstricke, die dazu führen können, dass eine Rahmenfarbe lautlos unsichtbar bleibt.
Wann die Farbe sichtbar wird
border-color malt einen Rahmen nur dann, wenn tatsächlich ein Rahmen vorhanden ist. Die Farbe wird zusammen mit den Eigenschaften border-style und border-width verwendet. Der Rahmen bleibt unsichtbar, wenn:
border-styleaufnoneoderhiddengesetzt ist (der Standardwert istnone), oderborder-widthden Wert0hat.
Mit anderen Worten: Das alleinige Setzen von border-color bewirkt nichts — Sie benötigen immer auch einen Stil. Die meisten Entwickler setzen alle drei Eigenschaften gleichzeitig mit der Kurzschreibweise border.
Diese Eigenschaft akzeptiert jeden CSS-Farbwert. Der Standardwert ist currentColor, was bedeutet, dass der Rahmen den color-Wert des Elements übernimmt, sofern er nicht überschrieben wird.
Die ein- bis vierwertigen Formen
border-color folgt dem standardmäßigen CSS-Kantenkurzschreibmuster. Die Anzahl der übergebenen Werte bestimmt, welchen Seiten sie zugeordnet werden:
| Werte | oben | rechts | unten | links |
|---|---|---|---|---|
red | red | red | red | red |
red green | red | green | red | green |
red green blue | red | green | blue | green |
red green blue gold | red | green | blue | gold |
Eine praktische Merkhilfe für die Reihenfolge der vier Werte ist „im Uhrzeigersinn von oben": oben, rechts, unten, links.
Eigenschaftsübersicht
| Anfangswert | currentColor |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbbar | Nein. |
| Animierbar | Ja. Die Rahmen des Elements sind animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.borderColor = "red"; |
Syntax
Syntax der CSS border-color Eigenschaft
border-color: color | transparent | initial | inherit;Beispiele
Eine einzelne Farbe für alle Seiten
Wenn Sie einen Wert angeben, wird die Farbe aller vier Seiten des Elements gesetzt.
<!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
Eine andere Farbe pro Seite
Hier werden vier Werte angewendet: der erste für den oberen Rahmen, der zweite für den rechten, der dritte für den unteren und der vierte für den linken.
<!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>Verschiedene Farbformate verwenden
Sie können einen Hexadezimalwert, RGB, RGBA, HSL, HSLA oder einen benannten Farbwert als Wert von border-color angeben. Das folgende Beispiel verwendet je eines davon.
<!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>Erfahren Sie mehr über die von CSS unterstützten Farbformate in HTML Colors.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| 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. Standard ist currentColor. | Ausprobieren » |
| transparent | Macht die Rahmenfarbe transparent. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |