border-inline

border-inline ist eine CSS logische Kurzschreibweise, die border-inline-color, border-inline-style und border-inline-width in einer einzigen Deklaration kombiniert und die Ränder eines Elements in der Inline-Richtung (links und rechts) formatiert.

.element {
  border-inline: 5px solid red;
  writing-mode: horizontal-tb;
}

border-inline ist das logische Äquivalent zu physikalischen Eigenschaften wie border-left und border-right (oder border-top und border-bottom, abhängig von der writing-mode). Es ist in der CSS Logical Properties and Values Level 1 Spezifikation definiert, die zum Zeitpunkt des Schreibens ein Editor’s Draft ist. Die Eigenschaft ist auch das Gegenstück zu border-block, welche die Ränder in der Block-Richtung (oben und unten) formatiert.

Die writing-mode ist standardmäßig von oben nach unten horizontal, wenn sie nicht explizit deklariert ist.

Die writing-mode setzt die Richtung

Die Richtung der Ränder hängt von der writing-mode Eigenschaft ab. Wenn die writing-mode auf die standardmäßige horizontale Richtung gesetzt ist, wird border-inline auf die linken und rechten Ränder eines Elements angewendet. Umgekehrt wendet eine vertikale writing-mode border-inline auf die oberen und unteren Ränder an.

Syntax

Die logische Eigenschaft border-inline ist eine Kurzschreibweise zum Setzen von border-inline-width, border-inline-style und border-inline-color für sowohl den Start- als auch den Endrand in einer einzigen Deklaration. Wiederum hängt die Richtung von "Start" und "Ende" von der writing-mode des Elements ab.

border-inline: <border-inline-width> || <border-inline-style> || <border-inline-color>

Browser-Unterstützung

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	92 1	66+	87+	14.1+	73+

iOS Safari	Android Chrome	Android Firefox	Android Browser	Opera Mobile
14.7+	92+	90+	92+	64 1

Bestandteileigenschaften

Schauen wir uns speziell border-inline-width, border-inline-style und border-inline-color an – die drei Eigenschaften, aus denen sich die Kurzschreibweise border-inline zusammensetzt.

border-inline-width

border-inline-width ist so ziemlich das, was man von der border-width Eigenschaft erwarten würde: sie definiert die Dicke der logischen Inline-Ränder eines Elements. Der große Unterschied ist, dass border-inline-width sich an die writing-mode des Elements anpasst.

/* <'border-inline-width'> values */
border-inline-width: 15px;
border-inline-width: thin; /* equivalent to 1px */
border-inline-width: medium; /* equivalent to 3px */
border-inline-width: thick; /* equivalent to 5px */

/* Global values */
border-inline-width: inherit;
border-inline-width: initial;
border-inline-width: revert;
border-inline-width: unset;

• Initial: medium
• Gilt für: Wie border-left-width
• Vererbt: nein
• Prozente: n/a
• Berechneter Wert: Wie die entsprechenden border-*-width Eigenschaften
• Kanonische Reihenfolge: per Grammatik
• Animationstyp: diskret

border-inline-width gilt ebenfalls als Kurzschreibweise, obwohl sie ein Bestandteil von border-inline ist. Sie umfasst die folgenden Eigenschaften, um die Breiten jedes einzelnen Rands in der Start- und Endrichtung eines Elements zu steuern.

• border-inline-start-width: Die Breite des linken Rands in einer horizontalen writing-mode, des oberen Rands in einer vertikalen links-nach-rechts writing-mode und des unteren Rands in einer vertikalen rechts-nach-links writing-mode.
• border-inline-end-width: Die Breite des rechten Rands in einer horizontalen writing-mode, des unteren Rands in einer vertikalen links-nach-rechts writing-mode und des oberen Rands in einer vertikalen rechts-nach-links writing-mode.

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	92 1	66+	87+	14.1+	73+

iOS Safari	Android Chrome	Android Firefox	Android Browser	Opera Mobile
14.7+	92+	90+	92+	64 1

border-inline-style

border-inline-style ist das logische Äquivalent zu border-style und wird genau auf die gleiche Weise verwendet, um den Typ der um das Element gezeichneten Linie anzugeben. Tatsächlich übernimmt es auch genau die gleichen Werte.

/* <'border-block-style'> values */
border-inline-style: hidden;
border-inline-style: solid
border-inline-style: dashed;
border-inline-style: dotted;
border-inline-style: double;
border-inline-style: groove;
border-inline-style: ridge;
border-inline-style: inset;
border-inline-style: outset;

/* Global values */
border-inline-style: inherit;
border-inline-style: initial;
border-inline-style: revert;
border-inline-style: unset;

• Initial: none
• Gilt für: Wie border-left-style
• Vererbt: nein
• Prozente: n/a
• Berechneter Wert: Wie die entsprechenden border-*-style Eigenschaften
• Kanonische Reihenfolge: per Grammatik
• Animationstyp: diskret

border-inline-style gilt ebenfalls als Kurzschreibweise. Sie umfasst die folgenden Eigenschaften, um den Linientyp für einzelne Ränder in der Start- und Endrichtung eines Elements zu steuern.

• border-inline-start-style: Der Stil des linken Rands in einer horizontalen writing-mode, des oberen Rands in einer vertikalen links-nach-rechts writing-mode und des rechten Rands in einer vertikalen rechts-nach-links writing-mode.
• border-inline-end-style: Der Stil des rechten Rands in einer horizontalen writing-mode, des unteren Rands in einer vertikalen links-nach-rechts writing-mode und des oberen Rands in einer vertikalen rechts-nach-links writing-mode.

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	92 1	66+	87+	14.1+	73+

iOS Safari	Android Chrome	Android Firefox	Android Browser	Opera Mobile
14.7+	92+	90+	92+	64 1

border-inline-color

border-inline-color wird verwendet, um die Rahmenfarbe anzugeben.

border-inline-color: yellow;
border-inline-color: #F5F6F7;
border-inline-color: rgba(170, 50, 220, .6);
border-inline-color: hsla(50, 100%, 50%, .6);

/* Global values */
border-inline-color: inherit;
border-inline-color: initial;
border-inline-color: revert;
border-inline-color: unset;

• Initial: none
• Gilt für: Wie border-left-color
• Vererbt: nein
• Prozente: n/a
• Berechneter Wert: Wie die entsprechenden border-*-color Eigenschaften
• Kanonische Reihenfolge: per Grammatik
• Animationstyp: nach berechnetem Werttyp

border-inline-color gilt ebenfalls als Kurzschreibweise. Sie umfasst die folgenden Eigenschaften, um den Typ der Linie für einzelne Ränder in der Start- und Endrichtung eines Elements zu steuern.

• border-inline-start-color: Die Farbe des linken Rands in einer horizontalen writing-mode, des oberen Rands in einer vertikalen links-nach-rechts writing-mode und des unteren Rands in einer vertikalen rechts-nach-links writing-mode.
• border-inline-end-color: Die Farbe des unteren Rands in einer horizontalen writing-mode, des rechten Rands in einer vertikalen links-nach-rechts writing-mode und des linken Rands in einer vertikalen rechts-nach-links writing-mode.

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	79+	41+	69+	12.1+	56+

iOS Safari	Android Chrome	Android Firefox	Android Browser	Opera Mobile
12.2+	92+	90+	92+	64

Lass uns über das Deklarieren nur einer Seite sprechen

Aber warte! Du denkst vielleicht darüber nach, wie du nur einen Rand für eine Seite deines Containers deklarieren könntest, anstatt ihn links und rechts oder oben und unten zu haben. Wenn wir mit physikalischen CSS-Eigenschaften arbeiten würden, könnten wir einfach auf die einzelnen Eigenschaften border-left, border-right, border-top und border-bottom zurückgreifen.

Aber für logische Eigenschaften nutzen wir border-inline-start und border-inline-end, um einzelne Ränder zu setzen. Schauen wir uns beide im Detail an und sehen, wie sie funktionieren.

border-inline-start

border-inline-start formatiert den logischen "Anfangs"-Rand eines Elements. Wenn wir also in einer standardmäßigen horizontalen Schreibrichtung von oben nach unten arbeiten würden, dann ist der linke Rand der Anfang und – Spoiler-Alarm – der rechte Rand ist das Ende.

.box {
  border-inline-start: 5px solid red;
  writing-mode: horizontal-tb;
  height: 200px;
  width: 200px;
}

Aber! Wenn wir die Schreibrichtung z.B. auf vertikal links-nach-rechts ändern würden, dann dreht sich die Startkante um 90 Grad, wodurch der obere Rand zum Anfang wird.

Und wenn wir die Dinge auf vertikal rechts-nach-links umstellen, kannst du es dir wahrscheinlich schon denken: Der untere Rand wird zum Anfang.

Schreibmodus	Anfangsrand
horizontal-tb	Linker Rand
vertical-lr	Oberer Rand
vertical-rl	Oberer Rand

border-inline-end

border-inline-end ist alles, was wir gerade bei border-inline-start betrachtet haben, nur in die entgegengesetzte Richtung. Wenn also im horizontalen Schreibmodus von oben nach unten der linke Rand der Anfang ist, dann ist der rechte Rand das Ende.

.box {
  border-inline-end: 5px solid red;
  writing-mode: horizontal-tb;
  height: 200px;
  width: 200px;
}

Schreibmodus	Endrand
horizontal-tb	Rechter Rand
vertical-lr	Unterer Rand
vertical-rl	Unterer Rand

Bestandteile der Bestandteile!

Wir haben gerade gesehen, wie border-inline eine Kurzschreibweise für border-inline-start und border-inline-end ist. Wir wissen auch, dass border-inline drei weitere Eigenschaften als Werte nimmt:

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

Nun, wenn du es glauben kannst, ist jede dieser Eigenschaften ebenfalls eine Kurzschreibweise für einzelne Eigenschaften. Wir können diese tatsächlich verwenden, um die Breite, den Stil und die Farbe jedes einzelnen Rands eines Elements zu formatieren, indem wir "start" und "end" in den Eigenschaftsnamen einfügen.

Start-Rand-Eigenschaften	Was es bewirkt
border-inline-start-width	Legt die Breite des „Start“-Rands fest
border-inline-start-style	Legt den Linienstil des „Start“-Rands fest
border-inline-start-color	Legt die Farbe des „Start“-Rands fest

End-Rand-Eigenschaften	Was es bewirkt
border-inline-end-width	Legt die Breite des „End“-Rands fest
border-inline-end-style	Legt den Linienstil des „End“-Rands fest
border-inline-end-color	Legt die Farbe des „End“-Rands fest

Weitere Informationen

• CSS Logical Properties and Values Level 1 specification
• MDN-Dokumentation

Weitere Lektüre

Verwandt