Dieborder-inline-endCSS Eigenschaft ist eineKurzschreibweise, um die individuellen logischen Inline-End-Border-Eigenschaftswerte an einer einzigen Stelle im Stylesheet festzulegen.

Probieren Sie es aus

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

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

border-inline-end: 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;}

Einzelkomponenten der Eigenschaften

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

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

Syntax

border-inline-end: 1px;border-inline-end: 2px dashed;border-inline-end: medium dashed blue;/* Global values */border-inline-end: inherit;border-inline-end: initial;border-inline-end: revert;border-inline-end: revert-layer;border-inline-end: unset;

Der physische Rand, auf den sichborder-inline-end bezieht, hängt vom Schreibmodus, der Richtung und der Textausrichtung des Elements ab. Es entspricht den Eigenschaftenborder-top,border-right,border-bottom, oderborder-left, abhängig von den definierten Werten fürwriting-mode,direction, undtext-orientation.

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

Werte

Derborder-inline-end wird mit einem oder mehreren der folgenden Elemente in beliebiger Reihenfolge angegeben:

<'border-width'>

Die Breite des Rands. Sieheborder-width.

<'border-style'>

Der Linienstil des Rands. Sieheborder-style.

<color>

Die Farbe des Rands.

Formale Definition

Formale Syntax

border-inline-end =
<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-end: 5px dashed blue;}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS Logische Eigenschaften und Werte
• Diese Eigenschaft ordnet sich einer der physischen Bordereigenschaften zu:border-top,border-right,border-bottom, oderborder-left.
• writing-mode,direction,text-orientation