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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

Die border-bottom Kurzschreibweise CSS Eigenschaft legt den unteren Rand eines Elements fest. Sie setzt die Werte von border-bottom-width, border-bottom-style und border-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 rgba(211, 220, 50, 0.6);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
  </div>
</section>

#example-element {
  background-color: #eee;
  color: #8b008b;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

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

css

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

Er entspricht tatsächlich diesem:

css

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

Der Wert von border-bottom-style, der vor border-bottom angegeben wurde, wird ignoriert. Da der Standardwert von border-bottom-style none ist, führt das Nicht-Spezifizieren des border-style Teils zu keinem Rand.

Einzelne Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise 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 Kurzschreibweise können in beliebiger Reihenfolge angegeben werden, und ein oder zwei von ihnen können weggelassen werden.

Werte

<br-width>: Siehe border-bottom-width.
<br-style>: Siehe border-bottom-style.
<color>: Siehe border-bottom-color.

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `border-bottom-width`: `medium` `border-bottom-style`: `none` `border-bottom-color`: `currentcolor`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter`.
Vererbt	Nein
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `border-bottom-width`: die absolute Länge; `0` falls `border-bottom-style` `none` oder `hidden` ist `border-bottom-style`: wie angegeben `border-bottom-color`: berechnete Farbe
Animationstyp	wie die jeweiligen Kurzschreibweisen: `border-bottom-color`: Farbe `border-bottom-style`: diskret `border-bottom-width`: Längenangabe

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

Einen unteren Rand anwenden

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