W3docs
de
Anmelden

CSS border-bottom-style Eigenschaft

Erfahren Sie, wie die CSS-Eigenschaft border-bottom-style den Linienstil des unteren Rahmens eines Elements festlegt, mit Beispielen für jeden Wert.

Die CSS-Eigenschaft border-bottom-style legt den Linienstil des unteren Rahmens eines Elements fest — ob er als durchgezogene Linie, als Strichfolge, als 3D-Rille usw. dargestellt wird. Sie steuert nur die untere Kante und lässt die anderen drei Seiten unberührt.

Verwenden Sie diese Eigenschaft, wenn Sie eine Seite unabhängig gestalten möchten — zum Beispiel ein Trennstrich im Unterstrich-Stil unter einer Überschrift oder eine gestrichelte Unterlinie auf einer Karte. Wenn Sie denselben Stil auf allen vier Seiten verwenden möchten, ist die Kurzschreibweise border-style prägnanter.

Die Eigenschaft border-bottom-style hat allein keine sichtbare Wirkung, sofern keine Rahmenfarbe und -breite angegeben sind. Kombinieren Sie sie mit border-bottom-width und border-bottom-color, oder setzen Sie alles auf einmal mit der Kurzschreibweise border-bottom. Die Ausnahme ist none (der Standardwert), der den Rahmen unabhängig von Breite oder Farbe vollständig entfernt.

Info

Die CSS-Spezifikation definiert nicht, wie Rahmen unterschiedlicher Stile an Ecken verbunden werden, sodass angrenzende Seiten mit unterschiedlichen Stilen auf browserspezifische Weise zusammentreffen können.

Anfangswertnone
Gilt fürAlle Elemente.
VererbtNein.
AnimierbarNein.
VersionCSS1
DOM-Syntaxobject.style.borderBottomStyle = "dotted";

Syntax

border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Werte

WertBeschreibung
noneEs wird kein Rahmen gezeichnet. Standardwert.
hiddenGleiches visuelles Ergebnis wie none bei normalen Elementen, unterdrückt jedoch angrenzende Rahmen bei der Tabellenrahmen-Konfliktlösung.
dottedEine Reihe runder Punkte.
dashedEine Reihe kurzer Striche.
solidEine einzelne durchgehende Linie.
doubleZwei parallele durchgezogene Linien. Die kombinierte Stärke plus der Abstand entspricht dem Wert von border-bottom-width.
grooveEin 3D-Effekt, der den Rahmen wie in die Seite eingeritzt erscheinen lässt. Das Gegenteil von ridge.
ridgeEin 3D-Effekt, der den Rahmen wie über die Seite erhaben erscheinen lässt. Das Gegenteil von groove.
insetEin 3D-Effekt, der das gesamte Element wie in die Seite hineingedrückt erscheinen lässt. Das Gegenteil von outset.
outsetEin 3D-Effekt, der das gesamte Element wie aus der Seite herausgehoben erscheinen lässt. Das Gegenteil von inset.
initialSetzt die Eigenschaft auf ihren Standardwert (none).
inheritErbt den Wert vom übergeordneten Element.

Beispiele

Durchgezogene und gestrichelte Rahmen

Die am häufigsten verwendeten Werte sind solid und dashed. Hier erhält eine Überschrift einen durchgezogenen unteren Rahmen und ein div einen gestrichelten.

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

Doppelte, gestrichelte und gerillte Rahmen

Dieses Beispiel kombiniert mehrere Werte. Beachten Sie, dass groove und andere 3D-Stile einen breiteren Rahmen (hier 8px) benötigen, um sichtbar zu sein — dünne Rahmen lassen die 3D-Schattierung verschwinden.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        border-bottom-style: double;
      }
      p {
        border-style: solid;
        border-bottom-style: dashed;
      }
      div {
        border-bottom-style: groove;
        border-bottom-width: 8px;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a double bottom border</h2>
    <p>A paragraph with a dashed bottom border (overrides the solid shorthand on the bottom side).</p>
    <div>A div element with a groove bottom border.</div>
  </body>
</html>
Probier es selbst »

Der Wert hidden

hidden sieht bei einem normalen Element identisch mit none aus, verhält sich jedoch bei der Tabellenrahmen-Konfliktlösung anders: Ein hidden-Rahmen gewinnt immer und unterdrückt den Rahmen der benachbarten Zelle.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: red;
        text-align: center;
        border: 5px solid black;
        border-bottom-style: hidden;
      }
    </style>
  </head>
  <body>
    <h1>Border on three sides — bottom is hidden</h1>
  </body>
</html>
Probier es selbst »

Der Wert inset

inset ist ein 3D-Stil, der die Box wie in die Seite hineingedrückt erscheinen lässt. Die Schattierung wird von der Rahmenfarbe abgeleitet und ist daher mit einem breiteren Rahmen am besten sichtbar.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: red;
        text-align: center;
        border: 5px solid;
        border-bottom-style: inset;
      }
    </style>
  </head>
  <body>
    <h1>Inset bottom border example</h1>
  </body>
</html>
Probier es selbst »

Der Wert outset

outset ist das Gegenteil von inset: Es lässt die Box wie aus der Seite herausgehoben erscheinen. Zusammen sind inset, outset, groove und ridge die vier 3D-Rahmenstile, und alle vier sind auf die Rahmenfarbe angewiesen, um ihren Schatteneffekt zu erzeugen.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-align: center;
        border: 5px solid;
        border-bottom-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Outset bottom border example</h1>
  </body>
</html>
Probier es selbst »

Wann welchen Wert verwenden

  • solid — die Standardwahl für die meisten UI-Elemente (Karten, Eingabefelder, Trennlinien).
  • dashed und dotted — nützlich für sekundäre Trennlinien, Drag-and-Drop-Ziele oder alles, das ein leichteres visuelles Gewicht als eine durchgezogene Linie benötigt.
  • double — gelegentlich für dekorative Überschriften verwendet; mindestens 3px Breite sind erforderlich, um beide Linien und den Abstand zu sehen.
  • groove / ridge — klassische 3D-Effekte; im modernen Flat-UI selten verwendet, aber weiterhin gültig.
  • inset / outset — können Schaltflächen-Druckeffekte simulieren; für feinere Kontrolle bietet sich stattdessen box-shadow an.
  • hidden — primär ein Tabellenlayout-Werkzeug; bei Nicht-Tabellenelementen vermeiden, wo none klarer ist.

Häufige Fallstricke

  • Ein Rahmenstil allein rendert nichts, wenn border-bottom-width 0 oder border-bottom-color transparent ist. Stellen Sie immer sicher, dass alle drei Rahmen-Untereigenschaften gesetzt sind.
  • Das Überschreiben der Kurzschreibweise border-bottom nach border-bottom-style setzt den Stil auf none zurück. Die Reihenfolge der Deklarationen spielt eine Rolle.
  • Der Wert double erfordert mindestens 3px Breite, um zwei deutlich sichtbare Linien darzustellen.
  • Die vier 3D-Werte (groove, ridge, inset, outset) sehen in manchen Browsern identisch zu ridge/groove aus, wenn die Rahmenfarbe currentColor auf einem dunklen Hintergrund ist — testen Sie immer mit einer expliziten Farbe.

Verwandte Eigenschaften

Übung

Übung
Welche der folgenden Werte sind gültige Werte für die CSS-Eigenschaft border-bottom-style?
Welche der folgenden Werte sind gültige Werte für die CSS-Eigenschaft border-bottom-style?
Was this page helpful?