CSS border-right-color Eigenschaft
Die border-right-color-Eigenschaft legt die Farbe des rechten Rahmens eines Elements fest. Alle Werte mit Beispielen.
Die CSS-Eigenschaft border-right-color legt die Farbe des rechten Rahmens eines Elements fest. Sie ermöglicht es, die rechte Seite unabhängig von den anderen drei Seiten zu gestalten – nützlich für Trennlinien, Hervorhebungen und asymmetrische Box-Designs.
Ein Rahmen besteht aus drei Bestandteilen – Breite, Stil und Farbe – und alle drei müssen vorhanden sein, damit der Rahmen angezeigt wird. Eine Farbe allein ergibt nichts, da ein Rahmen ohne Stil standardmäßig none ist. Stellen Sie daher sicher, dass auch ein Stil über border-style oder border-right-style gesetzt ist, wenn Sie border-right-color verwenden. Die Standardbreite ist medium; passen Sie sie mit border-width oder border-right-width an.
Wenn Sie alle Seiten auf einmal setzen möchten, verwenden Sie stattdessen die Kurzschreibweise border-color, die bis zu vier Werte für die obere, rechte, untere und linke Seite akzeptiert.
| Anfangswert | currentColor |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbt | Nein |
| Animierbar | Ja. Die Farbe des rechten Rahmens ist animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.borderRightColor = "black"; |
Syntax
border-right-color: color | transparent | initial | inherit;Der Wert ist eine einzelne <color> oder eines der CSS-weiten Schlüsselwörter. Anders als bei der Kurzschreibweise border-color akzeptiert diese Eigenschaft nie mehr als einen Wert – sie wirkt sich ausschließlich auf die rechte Seite aus.
Beispiel zur border-right-color-Eigenschaft
Im folgenden Beispiel wird einem Kasten ein einheitlicher grauer Rahmen zugewiesen, und anschließend wird nur die rechte Seite in Blau umgefärbt:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
padding: 20px;
border-style: solid;
border-color: #ccc;
border-right-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Border-right-color example</h2>
<div>Example for the border-right-color property with different right border color.</div>
</body>
</html>Beispiel mit dem Wert "transparent"
Das Schlüsselwort transparent verbirgt die Farbe des rechten Rahmens, behält jedoch den durch den border-width-Wert definierten Platz. Das ist praktisch für das Erstellen von Pfeilen und Dreiecken oder um Layoutverschiebungen zu vermeiden, wenn ein Rahmen ein- und ausgeblendet wird:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
padding: 3px;
text-align: center;
border: 15px groove #1c87c9;
border-right-color: transparent;
}
</style>
</head>
<body>
<h2>A heading with a transparent right border</h2>
</body>
</html>Als Wert für die border-right-color-Eigenschaft können hexadezimale Werte, RGB, RGBA, HSL, HSLA oder Farbnamen verwendet werden.
Ergebnis
Die vier unten gezeigten Wertformate erzeugen denselben Effekt – sie unterscheiden sich nur in der Schreibweise der Farbe.
Beispiel mit einem Farbnamen
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: black;
}
</style>
</head>
<body>
<div>Border-right-color property with a named color value.</div>
</body>
</html>Beispiel mit einem hexadezimalen Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: #1c87c9;
}
</style>
</head>
<body>
<div>Border-right-color property with a hexadecimal value.</div>
</body>
</html>Beispiel mit einem RGB-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div>Border-right-color property with a RGB value.</div>
</body>
</html>Beispiel mit einem HSL-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<div>Border-right-color property with a HSL value.</div>
</body>
</html>Wenn Sie border-right-style (oder border-style) weglassen, hat die Farbe keine sichtbare Wirkung – ein Rahmen ohne Stil ist standardmäßig none und wird überhaupt nicht angezeigt.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| color | Legt die Farbe des rechten Rahmens fest. Die Standardfarbe ist die Farbe des aktuellen Elements. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden. Erforderlicher Wert. | Ausprobieren » |
| transparent | Wendet eine transparente Farbe auf den rechten Rahmen an. Der rechte Rahmen nimmt weiterhin den durch border-width definierten Platz ein. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |