CSS-Eigenschaft border-bottom
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die border-bottom Shorthand CSS Eigenschaft setzt den unteren Rand (Border) eines Elements. Sie legt die Werte von border-bottom-width, border-bottom-style und border-bottom-color fest.
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;
}
Bestandteilseigenschaften
Diese Eigenschaft ist eine Shorthand 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 Shorthand-Eigenschaft können in beliebiger Reihenfolge angegeben werden, und einer oder zwei von ihnen können ausgelassen werden.
Werte
<br-width>-
Siehe
border-bottom-width. <br-style>-
Siehe
border-bottom-style. <color>-
Siehe
border-bottom-color.
Beschreibung
Wie bei allen Shorthand-Eigenschaften setzt border-bottom immer die Werte aller Eigenschaften, die es festlegen kann, auch wenn sie nicht angegeben sind. Die Eigenschaften, die nicht angegeben sind, werden auf ihre Standardwerte gesetzt. Betrachten Sie den folgenden Code:
border-bottom-style: dotted;
border-bottom: thick green;
Dies ist tatsächlich dasselbe wie dieser:
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 Weglassen des border-style Teils zu keinem Rand.
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,∞]> |
hairline |
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
| Spezifikation |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |