Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
border-right
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.
Dieborder-rightShorthandCSS Eigenschaft setzt alle Eigenschaften des rechtenBorders eines Elements.
Probieren Sie es aus
border-right: solid;border-right: dashed red;border-right: 1rem solid;border-right: thick double #32a1ce;border-right: 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:
Syntax
border-right: 1px;border-right: 2px dotted;border-right: medium dashed green;/* Global values */border-right: inherit;border-right: initial;border-right: revert;border-right: revert-layer;border-right: unset;Die drei Werte der Shorthandeigenschaft können in beliebiger Reihenfolge angegeben werden, und einer oder zwei von ihnen können ausgelassen werden.
Werte
Beschreibung
Wie bei allen Shorthand-Eigenschaften setztborder-right immer die Werte aller Eigenschaften, die es setzen kann, auch wenn sie nicht spezifiziert sind. Diejenigen, die nicht spezifiziert werden, werden auf ihre Standardwerte gesetzt. Betrachten Sie den folgenden Code:
border-right-style: dotted;border-right: thick green;Es ist tatsächlich dasselbe wie dieser:
border-right-style: dotted;border-right: none thick green;Der vorborder-right angegebene Wert vonborder-right-style wird ignoriert. Da der Standardwert vonborder-right-stylenone ist, führt das Weglassen desborder-style-Teils zu keinem Border.
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-right =
<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 rechten Borders
HTML
<div>This box has a border on the right side.</div>CSS
div { border-right: 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 |