CSS-Eigenschaft border-left-color

Die Eigenschaft border-left-color definiert die Farbe des linken Randes eines Elements.

Die Farbe des linken 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-left-color verwenden, sollen Sie zunächst die Eigenschaft border-style oder border-left-style einstellen und dann die Farbe des definierten Styles ändern.

Die Standardbreite eines Rahmens ist medium. Sie können die Breite entweder über die Eigenschaften border-width oder border-left-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.borderLeft = "1px solid black";

Syntax

border-left-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: #666;
      border-left-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für border-right-color</h2>
    <div>Ein Beispiel für die Eigenschaft border-right-color mit unterschiedlicher Farbe des rechten Randes.</div>
  </body>
</html>

Betrachten Sie ein weiteres Beispiel, bei dem der Wert für den linken 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 ridge  #8ebf42;
      border-left-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>Eine Überschrift mit einem transparenten linken Rand</h2>
  </body>
</html>
Sie können hexadezimale RGB, RGBA, HSL, HSLA oder Farbnamen als Wert für die Eigenschaft border-left-color einstellen.

Betrachten Sie ein CSS-Beispiel für border-left-color, wo der Wert eine benannte Farbe ist:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      padding: 3px;
      border-left-style: solid; 
      border-left-color: darkred;
      }
    </style>
  </head>
  <body>
    <div>Border-left-color Eigenschaft mit einem benannten Farbwert.</div>
  </body>
</html>

Sehen Sie ein Beispiel, wo ein hexadezimaler Wert für die Eigenschaft border-left-color eingestellt ist:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      padding: 3px;
      border-left-style: solid; 
      border-left-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <div>Die Eigenschaft Border-left-color mit einem hexadezimalen Wert.</div>
  </body>
</html>

Sehen Sie ein Beispiel mit border-left-color mit einem RGB-Wert:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      padding: 3px;
      border-left-style: solid; 
      border-left-color: rgb(142, 191, 66);
      }
    </style>
  </head>
  <body>
    <div>Die Eigenschaft Border-left-color mit einem RGB-Wert.</div>
  </body>
</html>

Sehen Sie ein Beispiel mit border-left-color mit einem HSL-Wert:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      padding: 3px;
      border-left-style: solid; 
      border-left-color: hsl(89, 43%, 51%);
      }
    </style>
  </head>
  <body>
    <div>Die Eigenschaft Border-left-color mit einem HSL-Wert.</div>
  </body>
</html>

Werte

Wert Beschreibung
color Es definiert die Farbe des linken Randes. Die Standardfarbe ist die Farbe des aktuellen Elements. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden. Obligatorisher Wert.
transparent Es wendet eine transparente Farbe auf den linken Rand an. Der linke Rand nimmt weiterhin den durch den Wert border-width definierten Platz ein.
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