CSS-Eigenschaft border-bottom-style

Die CSS-Eigenschaft border-bottom-style wird verwendet, um den Stil des unteren Randes des Elements anzugeben..

Ohne den Stil der Eigenschaft border-bottom oder border zu erwähnen, wird border-bottom-style nicht angezeigt.

Bemerken Sie bitte, dass die Spezifikation nicht definiert, wie die Grenzen verschiedener Stile in den Ecken zusammenhängen.
Anfangswert none
Gilt für Alle Elemente.
Geerbt Nein
Animierbar Nein
Version CSS1
DOM Syntax object.style.borderBottomStyle = "dotted";

Syntax

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

Beispiel

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

Betrachten wir ein anderes Beispiel mit verschiedenen Stilen von border-bottom.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Eine Überschrift mit einem doppelten unteren Rand.</h2>
    <p> Ein Absatz mit einem gestrichelten unteren Rand.</p>
    <div>Ein Element div mit einem unteren Nutrand.</div>
  </body>
</html>

Werte

Wert Beschreibung
none Es zeigt keine Grenzen. Es ist der Standardwert.
hidden Das gleiche wie "none", , außer bei der Lösung von Grenzkonflikten für Tabellenelemente.
dotted Der Rahmen wird als eine Reihe von Punkten angegeben.
dashed Der Rahmen wird als eine Reihe von Bindestrichen angegeben.
solid Der Rand wird als durchgezogene Linien angegeben.
double er Rand wird als doppelte durchgezogene Linien angegeben.
groove Es ist eine 3D gerillte Kante und erweckt den Eindruck, dass die Kante geschnitzt ist. Gegenüber von ridge.
ridge Es gibt einen 3D-Rand an und erweckt den Eindruck eines extrudierten Aussehens. Gegenüber der Nut.
inset Es ist ein 3D-Effekt, der den Eindruck erweckt, dass das Element eingebettet erscheint. Gegenteilig zu outset.
outset Es ist ein 3D-Effekt, der den Eindruck erweckt, dass das Element eingebettet erscheint. Gegenteilig zu inset.
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+ 9.2+

Übe dein Wissen

Welche Werte können für die CSS-Eigenschaft border-bottom-style verwendet werden?
Finden Sie das nützlich?