CSS-Eigenschaft border-bottom

Die Eigenschaft border-bottom ist eine stenografische Eigenschaft, mit deren Hilfe die Breite, der Stil und die Farbe des unteren Randes definiert werden können. Sie können die Stellen der Werte ändern. Aber die richtige Reihenfolge ist, wenn Sie die Breite, den Stil und dann die Farbe von border-bottom einstellen. Wenn Sie den Stil Ihres Rahmens nicht definieren, wird die Farbe nicht funktionieren, da ein Element einen Rahmen haben muss, bevor Sie die Farbe ändern können.

Wenn Sie die Breite nicht erwähnen, wählt es automatisch die mittlere Größe. Wenn die Farbe nicht erwähnt wird, wird sie die übergeordnete Farbe verstehen, und wenn der Stil nicht erwähnt wird, wird sie nicht funktionieren.

Anfangswert medium none currentColor
Gilt für Alle Elemente.
Geerbt Nein
Animierbar Ja, die Farbe und die Breite von border-bottom sind animierbar.
Version CSS1
DOM Syntax object.style.borderBottom = "15px dotted blue";

Syntax

border-bottom: border-width | border-style | border-color | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
      border-bottom: 8px groove #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Eine Überschrift mit einem falzblauen unteren Rand.</h2>
  </body>
</html>
Lassen Sie uns ein weiteres Beispiel sehen, wo wir den Elementen <h2>, <p> und <div> hinzugefügt haben.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
      border-bottom: 5px dashed #1c87c9;
      }
      p {
      border-bottom: 8px double #8ebf42;
      }
      div {
      border-bottom: 10px ridge #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Eine Überschrift mit einem gestrichelten blauen unteren Rand.</h2>
    <p>Ein Absatz mit einem doppelten grünen unteren Rand.</p>
    <div>Ein div-Element mit einem ridgegrauen unteren Rand.</div>
  </body>
</html>

Werte

Wert Beschreibung
border-bottom-style Es definiert den Stil des unteren Randes. Der Standardwert ist "none".
border-bottom-width Es definiert die Breite des unteren Randes. Der Standardwert ist "medium".
border-bottom-color Es definiert die Farbe des unteren Randes. Standardwert ist die Farbe des Textes.
initial Es setzt die Eigenschaft auf den 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 bewirkt die CSS-Eigenschaft 'border-bottom'?
Finden Sie das nützlich?