CSS border-inline-end-color egenskap

Föregående sida border-inline-end
Nästa sida border-inline-end-style

Definition och användning

border-inline-end-color egenskapen att sätta elementets kantfärg vid änden av dess inre riktning.

Observera:För att göra border-inline-end-color egenskaper att träda i kraft måste konfigureras border-inline-end-style egenskaper.

CSS border-inline-end-color egenskapen med border-bottom-color,border-left-color,border-right-color och border-top-color Egenskapen är mycket lika, men border-inline-end-color Egenskapen är beroende av inline-direction.

Observera:relaterade CSS-egenskaper writing-mode,text-orientation och direction Definierar inline-direction. Detta påverkar början och slutet av en rad, samt border-inline-end-color Effekten av egenskapen. För engelska sidor, inline-direction är från vänster till höger, block-direction är neråt.

Exempel

Exempel 1

Ställ in färgen för änden av inline-directions ramen:

div {
  border-inline-end-style: solid;
  border-inline-end-color: pink;
}

Prova själv

Exempel 2: Kombinera med writing-mode-egenskapen

Positionen av inline-directions ändra änden av ramen påverkas av writing-mode Påverkan av egenskapen:

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

Prova själv

Exempel 3: Kombinera med direction-egenskapen

Positionen av inline-directions ändra änden av ramen påverkas av direction Påverkan av egenskapen:

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

Prova själv

CSS syntax

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

Egenskapsvärde

Värde	Beskrivning
color	Specific border color. Default is the current color of the element. See:CSS Färgvärde.
transparent	Specific border color should be transparent.
initial	Set this property to its default value. See initial.
inherit	From its parent element inherits this property. See inherit.

Tekniska detaljer

Standardvärde:	The current color of the element
Arvande:	Nej
Animationsskapande:	Stöd. Se:Animation relaterade egenskaper.
Version:	CSS3
JavaScript syntax:	object.style.borderInlineEndColor="pink"