W3docs
de
Anmelden

CSS border-left-color Eigenschaft

Die border-left-color-Eigenschaft legt die Farbe des linken Rahmens eines Elements fest. Alle Werte mit Beispielen.

Die CSS-Eigenschaft border-left-color legt die Farbe des linken Rahmens eines Elements fest. Sie steuert ausschließlich die Farbe — damit der Rahmen sichtbar ist, werden außerdem ein Stil und eine Breite benötigt.

Diese Seite behandelt die Syntax von border-left-color, warum ein Rahmenstil erforderlich ist, damit der Rahmen angezeigt wird, sowie praktische Beispiele für alle Arten von Farbwerten (benannte Farben, Hex, RGB, HSL und transparent).

Warum ein Rahmenstil erforderlich ist

Ein Rahmen besteht aus drei Bestandteilen: Stil, Breite und Farbe. Standardmäßig ist der Rahmenstil none, was bedeutet, dass der Browser überhaupt keinen Rahmen zeichnet — das Setzen von nur border-left-color erzeugt daher nichts Sichtbares.

Um den linken Rahmen sichtbar zu machen, muss zuerst ein Stil mit border-style oder border-left-style festgelegt werden, bevor die Farbe angewendet wird:

.box {
  border-left-style: solid; /* required, otherwise the border is invisible */
  border-left-width: 4px;   /* optional; defaults to medium */
  border-left-color: #1c87c9;
}

Sollen auch der obere, rechte und untere Rahmen eingefärbt werden, setzt die Kurzschreibweise border-color alle vier Seiten auf einmal. Die Breite wird separat mit border-width oder border-left-width gesteuert (die Standardbreite ist medium).

Der Anfangswert ist currentColor, das heißt, bis eine Farbe explizit gesetzt wird, übernimmt der Rahmen den color-Wert des Elements selbst.

Eigenschaftsübersicht

AnfangswertcurrentColor
Gilt fürAlle Elemente. Gilt auch für ::first-letter.
VererbbarNein
AnimierbarJa. Die Farbe des linken Rahmens ist animierbar.
VersionCSS1
DOM Syntaxobject.style.borderLeft = "1px solid black";

Syntax

border-left-color: color | transparent | initial | inherit;

Beispiele

Den linken Rahmen anders einfärben als die anderen

Dieses Beispiel zeichnet mit border-color einen durchgezogenen Rahmen auf allen Seiten und überschreibt anschließend nur die linke Seite, damit sie hervorsticht:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 300px;
        padding: 20px;
        border-style: solid;
        border-color: #666;
        border-left-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Border-left-color example</h2>
    <div>Example for the border-left-color property with different left border color.</div>
  </body>
</html>
Probier es selbst »

Ergebnis:

CSS border-left-color Eigenschaft Beispiel mit einem blauen linken Rahmen

Den Wert „transparent" verwenden

Ein transparent linker Rahmen ist unsichtbar, belegt aber weiterhin den Platz, der durch die Rahmenbreite definiert wird. Das ist nützlich, um Layouts ausgerichtet zu halten oder Effekte zu erzeugen, die beim Hover sichtbar werden:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        padding: 3px;
        text-align: center;
        border: 15px ridge #8ebf42;
        border-left-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a transparent left border</h2>
  </body>
</html>
Probier es selbst »
Info

Die Farbe kann als benannter Farbwert, als Hexadezimalcode oder als rgb()-, rgba()-, hsl()- oder hsla()-Wert angegeben werden. Die folgenden Beispiele zeigen die gängigsten Formate.

Benannter Farbwert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 3px;
        border-left-style: solid;
        border-left-color: darkred;
      }
    </style>
  </head>
  <body>
    <div>Border-left-color property with a named color value.</div>
  </body>
</html>
Probier es selbst »

Hexadezimalwert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 3px;
        border-left-style: solid;
        border-left-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <div>Border-left-color property with a hexadecimal value.</div>
  </body>
</html>
Probier es selbst »

RGB-Wert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 3px;
        border-left-style: solid;
        border-left-color: rgb(142, 191, 66);
      }
    </style>
  </head>
  <body>
    <div>Border-left-color property with a RGB value.</div>
  </body>
</html>
Probier es selbst »

HSL-Wert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 3px;
        border-left-style: solid;
        border-left-color: hsl(89, 43%, 51%);
      }
    </style>
  </head>
  <body>
    <div>Border-left-color property with a HSL value.</div>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibungAusprobieren
colorLegt die Farbe des linken Rahmens fest. Die Standardfarbe ist die Farbe des aktuellen Elements. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden. Erforderlicher Wert.Ausprobieren »
transparentWendet eine transparente Farbe auf den linken Rahmen an. Der linke Rahmen belegt weiterhin den Platz, der durch den Wert von border-width definiert wird.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert.Ausprobieren »
inheritErbt die Eigenschaft vom übergeordneten Element.

Verwandte Eigenschaften

Übungsaufgaben

Übung
Welche Aussage zur CSS-Eigenschaft 'border-left-color' ist korrekt?
Welche Aussage zur CSS-Eigenschaft 'border-left-color' ist korrekt?
Was this page helpful?