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 Juli 2015.
Die border-bottom Kurzform 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 rgb(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: #eeeeee;
color: darkmagenta;
padding: 0.75em;
width: 80%;
height: 100px;
}
Wie bei allen Kurzform-Eigenschaften setzt border-bottom immer die Werte aller Eigenschaften, die es setzen kann, auch wenn sie nicht angegeben sind. Es setzt diejenigen, die nicht angegeben sind, auf ihre Standardwerte. Betrachten Sie den folgenden Code:
border-bottom-style: dotted;
border-bottom: thick green;
Dieser ist tatsächlich derselbe wie dieser hier:
border-bottom-style: dotted;
border-bottom: none thick green;
Der Wert von border-bottom-style, der vor border-bottom angegeben ist, wird ignoriert. Da der Standardwert von border-bottom-style none ist, führt das Nichtangeben des border-style-Teils zu keinem Rand.
Zusammengesetzte Eigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
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 einer oder zwei davon 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:
|
|---|---|
| Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter. |
| Vererbt | Nein |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | wie 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
Anwendung eines unteren Randes
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
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |
Browser-Kompatibilität
Loading…