W3docs
de
Anmelden

CSS border-bottom-width Eigenschaft

Mit der border-bottom-width Eigenschaft wird die Breite des unteren Rahmens eines Elements festgelegt. Erfahren Sie, wie Sie diese CSS-Eigenschaft verwenden.

Die Eigenschaft border-bottom-width legt die Breite (Stärke) des unteren Rahmens eines Elements fest. Sie steuert ausschließlich die untere Kante — um alle vier Seiten gleichzeitig zu gestalten, verwenden Sie stattdessen die Kurzschreibweise border-width.

Diese Seite erklärt, welche Werte border-bottom-width akzeptiert, warum ein Rahmenstil erforderlich ist, damit der Rahmen sichtbar wird, den Unterschied zwischen den Schlüsselwörtern thin/medium/thick und expliziten Längenangaben sowie den Bezug zu den anderen seitenspezifischen Breiteneigenschaften.

Warum die Breite oft nichts anzeigt

Damit die Wirkung von border-bottom-width sichtbar ist, müssen Sie außerdem einen Rahmenstil mit der Eigenschaft border-style oder border-bottom-style festlegen. Der anfängliche Rahmenstil ist none, und ein Rahmen mit dem Stil none wird niemals gerendert, egal wie breit er gemacht wird — die Breite hat also allein keine sichtbare Wirkung.

/* Invisible: no style set */
.box { border-bottom-width: 10px; }

/* Visible: width + style together */
.box { border-bottom-width: 10px; border-bottom-style: solid; }

Akzeptierte Werte

Sie können die Breite auf zwei Arten festlegen:

  • Länge — eine beliebige CSS-Länge wie 4px, 0.25em oder 0.1rem. Dies ist die zuverlässigste Option, da das Ergebnis genau dem angegebenen Wert entspricht. Negative Längen sind nicht erlaubt und werden als ungültig behandelt.
  • Schlüsselwörter — thin, medium oder thick. Die Spezifikation definiert keine genaue Pixelstärke für jedes Schlüsselwort; das genaue Ergebnis ist implementierungsabhängig. Die Schlüsselwörter folgen stets dem Muster thin ≤ medium ≤ thick, und ein gegebenes Schlüsselwort bleibt innerhalb eines einzelnen Dokuments konstant. In den meisten Browsern entsprechen sie ungefähr 1px, 3px und 5px.

Wenn Sie eine browserübergreifend einheitliche Breite benötigen, bevorzugen Sie eine explizite Länge gegenüber den Schlüsselwörtern.

Anfangswertmedium
Gilt fürAlle Elemente. Gilt auch für ::first-letter.
VererbungNein.
AnimierbarJa. Die Breite kann animiert werden.
VersionCSS1
DOM-Syntaxobject.style.borderBottomWidth = "5px";

Syntax

Syntax der CSS border-bottom-width Eigenschaft

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

Beispiel der border-bottom-width Eigenschaft:

Beispiel der CSS border-bottom-width Eigenschaft mit dem Wert thick

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-style: dotted;
        border-bottom-width: thick;
      }
    </style>
  </head>
  <body>
    <p>
      As you can see, we used border-bottom-width property to set the width of bottom border of this element.
    </p>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS border-bottom-width Eigenschaft

Beispiel der border-bottom-width Eigenschaft mit dem Wert "medium":

Beispiel der CSS border-bottom-width Eigenschaft mit dem Wert medium

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      h2 {
        border-bottom-style: groove;
        border-bottom-width: medium;
      }
      div {
        border-style: groove;
        border-bottom-width: medium;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a medium bottom border.</h2>
    <div>A div element with a medium bottom border.</div>
  </body>
</html>
Probier es selbst »

Beispiel der border-bottom-width Eigenschaft, das den Unterschied zwischen den Werten "thin" und "thick" zeigt:

Beispiel der CSS border-bottom-width Eigenschaft mit dem Wert thin

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      h2 {
        padding: 5px;
        border-bottom-style: ridge;
        border-bottom-width: thin;
        border-color: #cccccc;
      }
      div {
        padding: 5px;
        border-style: ridge;
        border-bottom-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>A heading with thin bottom border</h2>
    <div>A div element with thick bottom border.</div>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibungAusprobieren
mediumSetzt einen mittleren unteren Rahmen. Dies ist der Standardwert.Ausprobieren »
thinSetzt einen dünnen unteren Rahmen.Ausprobieren »
thickSetzt einen dicken unteren Rahmen.Ausprobieren »
lengthSetzt die Breite des unteren Rahmens auf einen bestimmten Längenwert.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert.Ausprobieren »
inheritErbt den Eigenschaftswert vom übergeordneten Element.

Verwandte Eigenschaften

border-bottom-width ist eine von vier seitenspezifischen Breiteneigenschaften. Verwenden Sie die passende für jede Kante oder die Kurzschreibweise, wenn Sie mehrere gleichzeitig festlegen möchten:

Übung

Übung
Welche der folgenden Werte werden von der border-bottom-width Eigenschaft in CSS akzeptiert?
Welche der folgenden Werte werden von der border-bottom-width Eigenschaft in CSS akzeptiert?
Was this page helpful?