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-Eigenschaft aus CSS definiert die Breite der logischen Blockränder eines Elements. Diese entspricht einer physischen Randbreite, abhängig vom Schreibmodus, der Richtung und Textorientierung des Elements. Sie korrespondiert mit den Eigenschaften border-top-width und border-bottom-width oder border-left-width und border-right-width, abhängig von den definierten Werten für writing-mode, direction und text-orientation.
Die Randbreite in der anderen Dimension kann mit border-inline-width festgelegt werden, was 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
/* <'border-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
<'border-width'>-
Die Breite des Randes. Siehe
border-width.
Formale Definition
| Anfangswert | medium |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Prozentwerte | logische Breite des beinhaltenden Blocks |
| Berechneter Wert | absolute Länge; 0, falls der Rahmenstil none oder hidden ist |
| Animationstyp | by computed value type |
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 Logical Properties and Values
- Diese Eigenschaft entspricht einer der physischen Rand-Eigenschaften:
border-top-width,border-right-width,border-bottom-width, undborder-left-width writing-mode,direction,text-orientation