CSS-Eigenschaft border-right-color

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>
Sie können hexadezimale, RGB, RGBA, HSL, HSLA oder Farbnamen als Wert für die Eigenschaft border-right-color einstellen.

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+


Finden Sie das nützlich?

Ähnliche Artikel