CSS-Eigenschaft border-color

❮ Vorige Nächste ❯

Die CSS-Eigenschaft border-color ist eine Abkürzung für die Einstellung der Farbe der vier Seiten des Randes eines Elements: border-top-color, border-right-color, border-bottom-color, border-left-color. Jede Seite kann ihren eigenen Wert haben. Die Eigenschaft border-color wird zusammen mit der Eigenschaft border-style verwendet. Wenn der Wert 0 ist, hat die Eigenschaft border-color keine Auswirkung.

Diese Eigenschaft nimmt jeden beliebigen CSS-Farbnamen an. Die Standardfarbe ist die aktuelle Farbe des Elements.

Die Eigenschaft border-color kann 4 Werte haben. Wenn es einen Wert hat, wird die Farbe auf alle vier Ränder angewendet. Wenn es zwei Werte hat, wird der erste Wert auf den oberen und unteren Rand gesetzt, der zweite Wert auf den rechten und linken Rand. Wenn es drei Werte hat, wird der erste auf den oberen Rand angewendet, der zweite auf rechts und links und der dritte auf den unteren. Wenn es vier Werte hat, wird der erste Wert nach oben, der zweite nach rechts, der dritte nach unten und der vierte nach links eingestellt.

Anfangswert	currentColor
Gilt für	Alle Elemente. Es gilt auch für ::first-letter.
Geerbt	Nein
Animierbar	Ja. Die Border der Box sinde animierbar.
Version	CSS1
DOM Syntax	object.style.borderStyle = "dotted double";

Syntax

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

Hier haben wir ein Beispiel mit einem Wert. Es stellt die Farbe für alle vier Seiten des Elements ein.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .dotted {
        border-style: dotted;
        border-color: #1c87c9;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div class="dotted">Ein Beispiel mit blau gestricheltem Rand.</div>
  </body>
</html>

Versuch es selber!

Lassen Sie uns ein anderes Beispiel sehen, wo 3 Werte angewendet werden. Der erste wird für oberen Rand, der zweite für rechts und links und der dritte für den unteren Rand verwendet.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .solid {
        border-style: solid;
        border-color: #1c87c9 cyan yellow #8ebf42;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div class="solid">Ein Beispiel mit der Eigenschaft border-color.</div>
  </body>
</html>

Versuch es selber!

Sie können hexadezimale, RGB, RGBA, HSL, HSLA oder Farbnamen als Wert für die Eigenschaft border-color einstellen.

Erfahren Sie mehr über HTML-Farben.

Lassen Sie uns nun ein Beispiel sehen, das mit hexadezimalen, RGB, HSL und benannten Farbwerten für die Eigenschaft border-color eingestellt ist.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style> 
      p {
      border: 5px solid #666;
      width: 60%;
      padding: 5px;
      }
      .name {  
      border-color: lightblue;
      }
      .hex {
      border-color: #1c87c9;
      }
      .rgb { 
      border-color: rgba(0,0,0,0.15);
      }
      .hsl { 
      border-color:  hsl(89, 43%, 51%);
      }
    </style>
  </head>
  <body>
    <p class="name">Border mit einer benannten Farbe.</p>
    <p class="hex">Border mit einem hexadezimalen Wert.</p>
    <p class="rgb">Border mit einem RGB-Farbwert.</p>
    <p class="hsl">Border mit einem HSL-Farbwert.</p>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
color	Es legt eine Farbe für die Rahmen fest. Die Standardfarbe ist die aktuelle Farbe des Elements. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden. Erforderlicher Wert.
transparent	Es macht die Borderfarbe transparent.
initial	Es setzt die Eigenschaft auf seinen Standardwert.
inherit	Es erbt die Eigenschaft von ihrem übergeordneten Element.