CSS border-bottom Eigenschaft

Die Eigenschaft border-bottom ist eine CSS-Kurzschreibweise, die Breite, Stil und Farbe des unteren Rahmens eines Elements in einer einzigen Deklaration definiert. Statt drei separate Langform-Eigenschaften zu schreiben, werden alle auf einmal gesetzt:

/* Longhand — three declarations */
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #1c87c9;

/* Shorthand — one declaration, same result */
border-bottom: 3px solid #1c87c9;

Diese Seite behandelt die Syntax, die akzeptierten Werte, ausgearbeitete Beispiele und den häufigsten Fallstrick (ein fehlender Stil), damit der Rahmen tatsächlich angezeigt wird.

Verhalten der Werte

Die drei Werte können in beliebiger Reihenfolge angegeben werden, die empfohlene Reihenfolge ist jedoch Breite, Stil, Farbe. Jeder weggelassene Wert fällt auf seinen Standardwert zurück:

Breite weggelassen → Standard ist medium (in den meisten Browsern ungefähr 3px).
Farbe weggelassen → Standard ist currentColor, d. h. die Textfarbe des Elements.
Stil weggelassen → Standard ist none, was bedeutet, dass der Rahmen überhaupt nicht gerendert wird.

Dieser letzte Punkt ist der häufigste Grund, warum ein border-bottom „nicht funktioniert": Ohne einen border-style zeichnet der Browser nichts, unabhängig von Breite oder Farbe.

/* Renders nothing — no style given */
.no-border { border-bottom: 5px #1c87c9; }

/* Renders a 5px blue solid line */
.works { border-bottom: 5px solid #1c87c9; }

Wann border-bottom verwenden

border-bottom eignet sich, wenn nur eine Seite eines Elements eine Linie erhalten soll und kein vollständiger Rahmenrahmen benötigt wird. Typische Anwendungsfälle:

Unterstrichene Überschriften oder Abschnittstrennlinien – eine kräftigere, farbige Linie unter einem <h2>.
Tab-/Navigationsanzeiger – Hervorhebung des aktiven Links mit einem unteren Rahmen.
Eingabefelder – der „Material Design"-Look verwendet nur einen unteren Rahmen statt eines vollständigen Rahmens.

Wenn derselbe Rahmen auf allen vier Seiten benötigt wird, sollte stattdessen die border-Kurzschreibweise verwendet werden. Für die übrigen einzelnen Seiten siehe border-top, border-left und border-right.

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

Syntax

Syntax der CSS border-bottom Eigenschaft

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

Beispiel der border-bottom Eigenschaft:

Beispiel der CSS border-bottom Eigenschaft mit dem Wert groove

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
        border-bottom: 8px groove #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a groove blue bottom border.</h2>
  </body>
</html>

Probier es selbst »

Beispiel der border-bottom Eigenschaft mit `<h2>`, `<p>` und `<div>` Elementen:

Beispiel der CSS border-bottom Eigenschaft mit den Werten dashed, double und ridge

<!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>A heading with a dashed blue bottom border.</h2>
    <p>A paragraph with a double green bottom border.</p>
    <div>A div element with a ridge gray bottom border.</div>
  </body>
</html>

Probier es selbst »

Werte

Wert	Beschreibung
border-bottom-style	Definiert den Stil des unteren Rahmens. Standardwert ist "none".
border-bottom-width	Definiert die Breite des unteren Rahmens. Standardwert ist "medium".
border-bottom-color	Definiert die Farbe des unteren Rahmens. Standardwert ist die Textfarbe.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übungen

Übung

Was macht die CSS-Eigenschaft 'border-bottom'?

Sie legt Breite, Stil und Farbe des unteren Rahmens eines Elements fest.Sie steuert das Layout des Grids.Sie legt die Hintergrundfarbe eines Elements fest.Sie kann mit einem, zwei oder drei Werten definiert werden.Sie ändert die Textausrichtung innerhalb eines Elements.