CSS-Eigenschaft border-color

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>

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>

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>

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.

Browser-Support

1.0+ 1.0+ 1.0+ 3.5+


Finden Sie das nützlich?

Ähnliche Artikel