CSS-Eigenschaft border-right-color
Die Eigenschaft border-right-color definiert die Farbe des rechten Rahmens eines Elements.
Die Farbe des rechten Rahmens kann zusammen mit den Farben für oberen, rechten und unteren Rahmen auch mit der Kurzschreibweise border-color definiert werden.
Wenn Sie die Eigenschaft border-right-color verwenden, sollten Sie zuerst die Eigenschaften border-style oder border-right-style festlegen und dann die Farbe des definierten Stils ändern.
Die Standardbreite eines Rahmens ist medium. Sie können die Breite mit den Eigenschaften border-width oder border-right-width angeben.
| Initial Value | currentColor |
|---|---|
| Applies to | All elements. It also applies to ::first-letter. |
| Inherited | No |
| Animatable | Yes. The color of the right border is animatable. |
| Version | CSS1 |
| DOM Syntax | object.style.borderRightColor = "black"; |
Syntax
Syntax der CSS-Eigenschaft border-right-color
border-right-color: color | transparent | initial | inherit;Beispiel für die Eigenschaft border-right-color:
Beispiel der CSS-Eigenschaft border-right-color
<!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 für die Eigenschaft border-right-color mit dem Wert "transparent" :
Beispiel der CSS-Eigenschaft border-right-color mit transparentem Wert
<!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>INFO
Sie können Hexadezimal-, RGB-, RGBA-, HSL-, HSLA-Werte oder Farbnamen als Wert für die Eigenschaft border-right-color festlegen.
Ergebnis
Beispiel für die Eigenschaft border-right-color mit einem benannten Farbwert:
Beispiel der CSS-Eigenschaft border-right-color mit benanntem Farbwert
<!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 für die Eigenschaft border-right-color mit einem Hexadezimalwert:
Beispiel der CSS-Eigenschaft border-right-color mit Hexadezimalwert
<!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 für die Eigenschaft border-right-color mit einem RGB-Wert:
Beispiel der CSS-Eigenschaft border-right-color mit 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 für die Eigenschaft border-right-color mit einem HSL-Wert:
Beispiel der CSS-Eigenschaft border-right-color mit 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>Werte
| Value | Description | Play it |
|---|---|---|
| color | Definiert die Farbe des rechten Rahmens. Die Standardfarbe ist die Farbe des aktuellen Elements. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden. Erforderlicher Wert. | Play it » |
| transparent | Wendet eine transparente Farbe auf den rechten Rahmen an. Der rechte Rahmen nimmt weiterhin den durch den Wert border-width definierten Platz ein. | Play it » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Play it » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Practice
What does the CSS property 'border-right-color' do?