Dieborder-bottomKurzformCSS-Eigenschaft legt den unterenRand eines Elements fest. Sie setzt die Werte vonborder-bottom-width,border-bottom-style undborder-bottom-color.

Probieren Sie es aus

border-bottom: solid;

border-bottom: dashed red;

border-bottom: 1rem solid;

border-bottom: thick double #32a1ce;

border-bottom: 4mm ridge rgb(211 220 50 / 0.6);

<section>  <div>    This is a box with a border around it.  </div></section>

#example-element {  background-color: #eeeeee;  color: darkmagenta;  padding: 0.75em;  width: 80%;  height: 100px;}

Zusammengesetzte Eigenschaften

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

• border-bottom-color
• border-bottom-style
• border-bottom-width

Syntax

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

<br-width>

Sieheborder-bottom-width.

<br-style>

Sieheborder-bottom-style.

<color>

Sieheborder-bottom-color.

Beschreibung

Wie bei allen Kurzform-Eigenschaften setztborder-bottom immer die Werte aller Eigenschaften, die es setzen kann, auch wenn sie nicht spezifiziert sind. Es setzt diejenigen, die nicht angegeben sind, auf ihre Standardwerte. Betrachten Sie den folgenden Code:

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

Dies entspricht tatsächlich diesem:

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

Der Wert vonborder-bottom-style vorborder-bottom wird ignoriert. Da der Standardwert vonborder-bottom-stylenone ist, führt das Weglassen desborder-style-Teils zu keinem Rand.

Formale Definition

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

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

CSS

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

Ergebnisse

Spezifikationen

Browser-Kompatibilität

Siehe auch

• border
• border-block
• outline