Dieborder-inline-startCSS Eigenschaft ist eineKurzschreibweise zum Festlegen der individuellen logischeninline-start-Randeigenschaften an einer Stelle im Stylesheet.

Probieren Sie es aus

border-inline-start: solid;writing-mode: horizontal-tb;

border-inline-start: dashed red;writing-mode: vertical-rl;

border-inline-start: 1rem solid;writing-mode: horizontal-tb;direction: rtl;

<section>  <div>    This is a box with a border around it.  </div></section>

#example-element {  background-color: #eeeeee;  color: darkmagenta;  padding: 0.75em;  width: 80%;  height: 100px;  unicode-bidi: bidi-override;}

Zugehörige Eigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

• border-inline-start-color
• border-inline-start-style
• border-inline-start-width

Syntax

border-inline-start: 1px;border-inline-start: 2px dotted;border-inline-start: medium dashed green;/* Global values */border-inline-start: inherit;border-inline-start: initial;border-inline-start: revert;border-inline-start: revert-layer;border-inline-start: unset;

Der physische Rand, auf denborder-inline-start abgebildet wird, hängt von der Schreibrichtung, der Richtung und der Textausrichtung des Elements ab. Er entspricht derborder-top,border-right,border-bottom, oderborder-left Eigenschaft, abhängig von den definierten Werten fürwriting-mode,direction, undtext-orientation.

Verwandte Eigenschaften sindborder-block-start,border-block-end, undborder-inline-end, die die anderen Ränder des Elements definieren.

Werte

Derborder-inline-start wird mit einem oder mehreren der folgenden Werte in beliebiger Reihenfolge angegeben:

<'border-width'>

Die Breite des Randes. Sieheborder-width.

<'border-style'>

Der Linienstil des Randes. Sieheborder-style.

<color>

Die Farbe des Randes.

Formale Definition

Formale Syntax

border-inline-start =
<line-width>||
<line-style>||
<color>

<line-width> =
<length [0,∞]>|
thin|
medium|
thick

<line-style> =
none|
hidden|
dotted|
dashed|
solid|
double|
groove|
ridge|
inset|
outset

Beispiele

HTML

<div>  <p>Example text</p></div>

CSS

div {  background-color: yellow;  width: 120px;  height: 120px;}.exampleText {  writing-mode: vertical-rl;  border-inline-start: 5px dashed blue;}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS Logische Eigenschaften und Werte
• Diese Eigenschaft wird auf eine der physischen Randeigenschaften abgebildet:border-top,border-right,border-bottom, oderborder-left.
• writing-mode,direction,text-orientation