CSS-Eigenschaft border-bottom

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.