Die Eigenschaft border-right-color definiert die Farbe des rechten Randes eines Elements.
Die Farbe des rechten 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-right-color verwenden, sollen Sie zunächst die Eigenschaft border-style oder border-right-style einstellen und dann die Farbe des definierten Styles ändern.
Die Standardbreite eines Rahmens ist medium. Sie können die Breite entweder über die Eigenschaft border-width oder die Eigenschaft border-right-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.borderRightColor = "black"; |
Syntax
border-right-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: #ccc;
border-right-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Ein Beispiel für Border-right-color</h2>
<div>Ein Beispiel für die Eigenschaft border-right-right-color mit unterschiedlicher rechter Randfarbe.</div>
</body>
</html>Betrachten wir ein weiteres Beispiel, wo der Wert für den rechten 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 groove #1c87c9;
border-right-color: transparent;
}
</style>
</head>
<body>
<h2>Eine Überschrift mit einem transparenten rechten Rand</h2>
</body>
</html>Sehen Sie ein Beispiel mit der CSS-Eigenschaft border-right-color, wo der Wert eine benannte Farbe ist:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: black;
}
</style>
</head>
<body>
<div>Die Eigenschaft Border-right-color mit einem benannten Farbwert.</div>
</body>
</html>Betrachten Sie ein Beispiel, wo ein hexadezimaler Wert für die Eigenschaft border-right-color eingestellt ist:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: #1c87c9;
}
</style>
</head>
<body>
<div>Die Eigenschaft Border-right-color mit einem hexadezimalen Farbenwert.</div>
</body>
</html>Betrachten wir nun ein Beispiel mit der Eigenschaft border-right-color mit einem RGB-Wert:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div>Die Eigenschaft Border-right-color mit einem RGB-Wert.</div>
</body>
</html>Betrachten wir nun ein Beispiel mit der Eigenschaft border-right-color mit einem HSL-Wert:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<div>Die Eigenschaft Border-right-color mit einem HSL-Wert.</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| color | Es definiert die Farbe des rechten Randes. Die Standardfarbe ist die Farbe des aktuellen Elements. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden. Obligatorischer Wert. |
| transparent | Es wendet eine transparente Farbe auf den rechten Rand an. Der rechte Rand nimmt weiterhin den Platz ein, der durch die Eigenschaft border-width definiert ist. |
| 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
