border-block-width CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2021 browserübergreifend verfügbar.
Die border-block-width CSS Eigenschaft definiert die Breite der logischen Blockränder eines Elements, die in Abhängigkeit vom Schreibmodus, der Richtung und der Textausrichtung des Elements auf eine physische Randbreite abbildet. Sie entspricht der border-top-width und border-bottom-width, oder border-left-width, und border-right-width Eigenschaft, je nach den definierten Werten für writing-mode, direction, und text-orientation.
Die Randbreite in der anderen Dimension kann mit border-inline-width festgelegt werden, die border-inline-start-width und border-inline-end-width setzt.
Probieren Sie es aus
border-block-width: thick;
writing-mode: horizontal-tb;
border-block-width: thick;
writing-mode: vertical-rl;
border-block-width: 4px;
writing-mode: horizontal-tb;
direction: rtl;
<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: palegreen;
color: black;
border: 0 solid crimson;
padding: 0.75em;
width: 80%;
height: 100px;
unicode-bidi: bidi-override;
}
Syntax
/* <'line-width'> values */
border-block-width: 5px;
border-block-width: thick;
/* Global values */
border-block-width: inherit;
border-block-width: initial;
border-block-width: revert;
border-block-width: revert-layer;
border-block-width: unset;
Werte
<line-width>-
Definiert die Breite des Randes, entweder als explizite nicht-negative
<length>oder mit den Schlüsselwörtern:thin,medium, oderthick. Der Standardwert istmedium.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
Formale Syntax
border-block-width =
<'border-top-width'>{1,2}
<border-top-width> =
<line-width>
<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
Beispiele
Randbreite 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-lr;
border: 1px solid blue;
border-block-width: 5px;
}
Ergebnisse
Spezifikationen
| Spezifikation |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-border-block-width |
Browser-Kompatibilität
Siehe auch
- CSS Logische Eigenschaften und Werte
- Diese Eigenschaft bildet auf eine der physischen Rand-Eigenschaften ab:
border-top-width,border-right-width,border-bottom-width, undborder-left-width writing-mode,direction,text-orientation