border-block-start-style CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Die border-block-start-style CSS Eigenschaft definiert den Stil des logischen Beginns der Blockgrenze eines Elements. Dieser Stil wird je nach Schreibmodus, Richtung und Textausrichtung des Elements auf einen physischen Begrenzungsstil abgebildet. Er entspricht der Eigenschaft border-top-style, border-right-style, border-bottom-style oder border-left-style, abhängig von den Werten, die für writing-mode, direction und text-orientation definiert sind.
Probieren Sie es aus
border-block-start-style: dotted;
writing-mode: horizontal-tb;
border-block-start-style: dotted;
writing-mode: vertical-rl;
border-block-start-style: groove;
writing-mode: horizontal-tb;
border-block-start-style: dashed;
writing-mode: vertical-lr;
<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;
}
Syntax
/* Keyword values */
border-block-start-style: dashed;
border-block-start-style: dotted;
border-block-start-style: groove;
/* Global values */
border-block-start-style: inherit;
border-block-start-style: initial;
border-block-start-style: revert;
border-block-start-style: revert-layer;
border-block-start-style: unset;
Verwandte Eigenschaften sind border-block-end-style, border-inline-start-style und border-inline-end-style, die die anderen Begrenzungsstile des Elements definieren.
Werte
<line-style>-
Der Linienstil der Grenze. Siehe
border-style.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
border-block-start-style =
<line-style>
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Beispiele
Gestrichelte Grenze 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-start-style: dashed;
}
Ergebnisse
Spezifikationen
| Spezifikation |
|---|
| CSS Logical Properties and Values Module Level 1 # border-style |
Browser-Kompatibilität
Siehe auch
- Logische CSS-Eigenschaften und Werte
- Diese Eigenschaft wird auf eine der physischen Grenzeigenschaften abgebildet:
border-top-style,border-right-style,border-bottom-styleoderborder-left-style. writing-mode,direction,text-orientation