CSS-Eigenschaft border-bottom-color

Die CSS-Eigenschaft border-bottom-color wird verwendet, um die Farbe des unteren Randes eines Elements festzulegen.

Zuerst müssen Sie die Eigenschaften border-style oder border-bottom-style definieren, da ein Element einen Rand haben muss, bevor Sie seine Farbe ändern können.

Die Farbe des unteren Randes kann auch mit der Shorthand-Eigenschaft border-color definiert werden.

Anfangswert currentColor
Gilt für Alle elemente
Geerbt Nein
Animierbar Ja. Die Farbe des unteren Randes ist animierbar.
Version CSS1.
DOM Syntax object.style.borderBottomColor = "blue";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
      border-bottom-style: solid;
      border-bottom-color: #1c87c9;
      border-bottom-width: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Eine Überschrift mit einem massiven blauen unteren Rand</h2>
  </body>
</html>

Lassen Sie uns ein weiteres Beispiel sehen, wo wir Farbenzu den Elementen <h2>, <p> und <div> hinzugefügt haben, um den Farbeffekt zu zeigen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
      border-bottom-style: groove;
      border-bottom-color: #8ebf42;
      border-bottom-width: 5px;
      }
      div {
      border-style: inset;
      border-bottom-color: #ccc;
      border-bottom-width: 8px;
      }
      p { 
      border-style: double;
      border-bottom-color: #1c87c9;
      border-bottom-width: 8px;
      }
    </style>
  </head>
  <body>
    <h2>Eine Überschrift mit einem grünen unteren Rand.</h2>
    <div>Ein Element div mit einem eingefügten grauen unteren Rand.</div>
    <p>Ein Absatz mit einem doppelten blauen Rand.</p>
  </body>
</html>

In diesem Beispiel haben wir den Wert transparent verwendet.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
      border: #666 dashed;
      border-bottom-color: transparent;
      padding: 8px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für transparent border-bottom-color</h2>
    <div>Dies ist ein Beispiel für ein Element div, das auf transparent border-bottom-color eingestellt ist.</div>
  </body>
</html>

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

Erfahren Sie mehr über HTML-Farben.

Sehen wir uns nun ein Beispiel an, wo die Eigenschaft border-bottom-color mit hexadezimalen, RGB, HSL und benannten Farbwerten eingestellt ist.

Beispiel

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

Werte

Wert Beschreibung
color Es zeigt die Farbe des unteren Randes an. Die Standardfarbe ist die Farbe des Elements. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden. Erforderlicher Wert.
transparent Es zeigt an, dass die Randfarbe transparent sein soll. Der untere Rand nimmt immer noch den Platz ein, der durch den Wert für die Rahmenbreite definiert ist.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Übe dein Wissen

Was ist die CSS-Eigenschaft 'border-bottom-color'?
Finden Sie das nützlich?