border-bottom

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die border-bottom Kurzform CSS Eigenschaft setzt den unteren Rand eines Elements. Sie legt die Werte von border-bottom-width, border-bottom-style und border-bottom-color fest.

Probieren Sie es aus

Wie bei allen Kurzform-Eigenschaften setzt border-bottom stets die Werte aller ihr zugeordneten Eigenschaften, selbst wenn sie nicht spezifiziert sind. Nicht spezifizierte Werte werden auf ihre Standardwerte gesetzt. Betrachten Sie den folgenden Code:

css
border-bottom-style: dotted;
border-bottom: thick green;

Er entspricht tatsächlich diesem hier:

css
border-bottom-style: dotted;
border-bottom: none thick green;

Der vor border-bottom angegebene Wert von border-bottom-style wird ignoriert. Da der Standardwert von border-bottom-style none ist, resultiert das Nicht-Angeben des border-style-Teils in keinem Rand.

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

Syntax

css
border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed blue;

/* Global values */
border-bottom: inherit;
border-bottom: initial;
border-bottom: revert;
border-bottom: revert-layer;
border-bottom: unset;

Die drei Werte der Kurzform-Eigenschaft können in beliebiger Reihenfolge angegeben werden, und ein oder zwei von ihnen können weggelassen werden.

Werte

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter.
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:

Formale Syntax

border-bottom = 
<line-width> ||
<line-style> ||
<color>

<line-width> =
<length [0,∞]> |
thin |
medium |
thick

<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset

Beispiele

Anwenden eines unteren Rands

HTML

html
<div>This box has a border on the bottom side.</div>

CSS

css
div {
  border-bottom: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

Ergebnisse

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3
# border-shorthands

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-bottom

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch