CSS Border-Inline-Farbe Eigenschaft

Definition und Verwendung

border-inline-color Diese Eigenschaft setzt die Rahmenfarben des Elements in der Inline-Richtung fest.

Note:Um border-inline-color Diese Eigenschaft ist wirksam, wenn border-inline-style.

border-inline-color Der Wert der Eigenschaft kann auf verschiedene Weise eingestellt werden:

Wenn border-inline-color Diese Eigenschaft hat zwei Werte:

border-inline-color: rosa blau;

• Die Rahmenfarbe am Anfang des Inline-Elements ist rosa
• Die Rahmenfarbe am Ende des Inline-Elements ist blau

Wenn border-inline-color Diese Eigenschaft hat einen Wert:

border-inline-color: blue;

• Die Rahmenfarben am Anfang und am Ende des Inline-Elements sind blau

CSS der border-inline-color Eigenschaft und border-bottom-color,border-left-color,border-right-color and border-top-color The properties are very similar, but border-inline-color The property depends on the inline direction.

Note:and related CSS properties writing-mode,text-orientation and direction Defines the inline direction. This affects the starting and ending positions of a line, as well as border-inline-color Effect of the property. For English pages, the inline direction is from left to right, and the block direction is downward.

Instance

Example 1

Set the color for the border in the inline direction:

#example1 {
  border-inline-style: solid;
  border-inline-color: pink;
}
#example2 {
  border-inline-style: solid;
  border-inline-color: pink lightblue;
}

Try It Yourself

Example 2: Combined with the writing-mode property

The borders at the starting and ending positions of the inline direction are affected by writing-mode Impact of the property:

div {
  border-inline-style: solid;
  writing-mode: vertical-rl;
  border-inline-color: blue;
}

Try It Yourself

Example 3: Combined with the direction property

The borders at the starting and ending positions of the inline direction are affected by direction Impact of the property:

div {
  direction: rtl;
  border-inline-color: blue hotpink;
}

Try It Yourself

CSS Syntax

border-inline-color: color|transparent|initial|inherit;

Property Value

Technical Details

Browser Support

The numbers in the table represent the browser version that first fully supports this property.

Verwandte Seiten

Tutorial:CSS Rand

Referenz:CSS Border Eigenschaft

Referenz:CSS Border-Inline Eigenschaft

Referenz:CSS border-inline-style Eigenschaft

Referenz:CSS Border-Bottom-Farbe Eigenschaft

Referenz:CSS border-left-color Eigenschaft

Referenz:CSS border-right-color Eigenschaft

Referenz:CSS border-top-color Eigenschaft

Referenz:CSS direction Eigenschaft

Referenz:CSS text-orientation Eigenschaft

Referenz:CSS writing-mode Eigenschaft