border-block-end
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
Die border-block-end
CSS Eigenschaft ist eine Kurzschreibweise zum Festlegen der einzelnen logischen Block-Ende-Rand Eigenschaften in einem einzigen Eintrag im Stylesheet.
Probieren Sie es aus
Zusammengesetzte Eigenschaften
Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:
Syntax
border-block-end: 1px;
border-block-end: 2px dotted;
border-block-end: medium dashed blue;
/* Global values */
border-block-end: inherit;
border-block-end: initial;
border-block-end: revert;
border-block-end: revert-layer;
border-block-end: unset;
border-block-end
kann verwendet werden, um die Werte für eine oder mehrere der Eigenschaften border-block-end-width
, border-block-end-style
und border-block-end-color
festzulegen. Der physische Rand, auf den sie abgebildet wird, hängt vom Schreibmodus, der Richtung und der Textorientierung des Elements ab. Sie entspricht je nach definierten Werten für writing-mode
, direction
und text-orientation
der Eigenschaft border-top
, border-right
, border-bottom
oder border-left
.
Verwandte Eigenschaften sind border-block-start
, border-inline-start
und border-inline-end
, die die anderen Ränder des Elements definieren.
Werte
Die border-block-end
Eigenschaft wird mit einem oder mehreren der folgenden angegeben, in beliebiger Reihenfolge:
<'border-width'>
-
Die Breite des Randes. Siehe
border-width
. <'border-style'>
-
Der Linienstil des Randes. Siehe
border-style
. <color>
-
Die Farbe des Randes.
Formale Definition
Initialer Wert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
Formale Syntax
Beispiele
Rand mit vertikalem Text
HTML
<div>
<p class="exampleText">Example text</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
border-block-end: 5px dashed blue;
}
Ergebnisse
Spezifikationen
Specification |
---|
CSS Logical Properties and Values Level 1 # border-shorthands |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- CSS Logische Eigenschaften und Werte
- Diese Eigenschaft wird einer der physischen Rand-Eigenschaften zugeordnet:
border-top
,border-right
,border-bottom
, oderborder-left
. writing-mode
,direction
,text-orientation