border-block-style
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
Die border-block-style CSS Eigenschaft definiert den Stil der logischen Blockgrenzen eines Elements. Diese werden entsprechend dem Schreibmodus, der Richtung und der Textausrichtung des Elements in einen physischen Rahmenstil umgewandelt. Sie entspricht den Eigenschaften border-top-style und border-bottom-style, oder border-left-style und border-right-style, je nach den festgelegten Werten für writing-mode, direction und text-orientation.
Probieren Sie es aus
border-block-style: dotted;
writing-mode: horizontal-tb;
border-block-style: dotted;
writing-mode: vertical-rl;
border-block-style: groove;
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: #eeeeee;
color: black;
border: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
unicode-bidi: bidi-override;
}
Der Rahmenstil in der anderen Dimension kann mit border-inline-style festgelegt werden, das border-inline-start-style und border-inline-end-style setzt.
Syntax
/* <'border-style'> values */
border-block-style: dashed;
border-block-style: dotted;
border-block-style: groove;
/* Global values */
border-block-style: inherit;
border-block-style: initial;
border-block-style: revert;
border-block-style: revert-layer;
border-block-style: unset;
Werte
<'border-style'>-
Der Linienstil des Rahmens. Siehe
border-style.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
border-block-style =
<'border-top-style'>{1,2}
<border-top-style> =
<line-style>
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Beispiele
Gestrichelter Rahmen 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: 5px solid blue;
border-block-style: dashed;
}
Ergebnisse
Spezifikationen
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # propdef-border-block-style |
Browser-Kompatibilität
Siehe auch
- CSS Logical Properties and Values
- Diese Eigenschaft wird einer der physischen Rahmen-Eigenschaften zugeordnet:
border-top-style,border-right-style,border-bottom-style, oderborder-left-style. writing-mode,direction,text-orientation