CSS-Eigenschaft border-bottom-width

Die Eigenschaft border-bottom-width legt die Breite des unteren Randes fest.

Sie müssen die Eigenschaft border-style oder border-bottom-style vor der Eigenschaft border-bottom-width einstellen. Zuerst müssen Sie Grenzen haben, bevor Sie die Breite ändern können.

Die Spezifikation setzt nicht die genaue Dicke, die durch jedes Schlüsselwort festgelegt wird, das genaue Ergebnis bei der Verwendung eines von ihnen ist implementierungsspezifisch. Aber sie folgen immer dem Muster ≤ medium ≤ thick, und die Werte sind innerhalb eines einzigen Dokuments konstant.

Anfangswert medium
Gilt für Alle Elemente. Es gilt auch für ::first-letter.
Geerbt Nein
Animierbar Ja. Die Breite kann animierbar sein.
Version CSS1
DOM Syntax object.style.borderBottomWidth = "5px";

Syntax

border-bottom-width: medium | thin | thick | length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-style: dotted;
        border-bottom-width: thick;
      }
    </style>
  </head>
  <body>
    <p>Wie Sie sehen können, haben wir die Eigenschaft border-bottom-width verwendet, um die Breite des unteren Randes dieses Elements festzulegen.</p>
  </body>
</html>

Hier ist ein weiteres Beispiel mit mittlerer Breite des unteren Randes.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      h2 {
      border-bottom-style: groove;
      border-bottom-width: medium;
      }
      div {
      border-style: groove;
      border-bottom-width: medium;
      }
    </style>
  </head>
  <body>
    <h2>Eine Überschrift mit einem mittleren unteren Rand.</h2>
    <div>Ein Element div mit einem mittleren unteren Rand.</div>
  </body>
</html>

Sehen Sie ein weiteres Beispiel, wo Sie den Unterschied zwischen 20px thin width des unteren Randes und 20px thick width des unteren Randes sehen können.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
      padding: 5px;  
      border-bottom-style: ridge;
      border-bottom-width: 20px thin;
      }
      div {
      padding: 5px;  
      border-style: ridge;
      border-bottom-width: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Eine Überschrift mit 20px dünnem unteren Rand</h2>
    <div>Ein div-Element mit 20px dickem unteren Rand.</div>
  </body>
</html>

Werte

Wert Beschreibung
medium Es setzt einen mittleren unteren Rand. Es ist der Standardwert.
thin Es setzt einen dünnen unteren Rand.
thick Es setzt einen dicken unteren Rand.
length Mithilfe von length können Sie die Dicke des unteren Randes einstellen.
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 beinhaltet die CSS-Eigenschaft 'border-bottom-width'?
Finden Sie das nützlich?