Atributo border-inline-end-color do CSS

Página anterior border-inline-end
Próxima página border-inline-end-style

Definição e uso

border-inline-end-color Configurar a cor da borda do elemento no extremo final da direção de linha.

Anotação:Para que border-inline-end-color Para que o atributo funcione, deve ser configurado border-inline-end-style Atributo.

CSS border-inline-end-color A propriedade e border-bottom-color,border-left-color,border-right-color e border-top-color As propriedades são muito semelhantes, mas border-inline-end-color A propriedade depende da direção direcional.

Anotação:propriedades CSS relacionadas writing-mode,text-orientation e direction Define a direção direcional. Isso afeta a posição de início e fim de uma linha, bem como border-inline-end-color Efeito da propriedade. Para páginas em inglês, a direção direcional é de esquerda para direita, e a direção bloco é para baixo.

Exemplo

Exemplo 1

Defina a cor da borda do final direcional inline:

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

Experimente você mesmo

Exemplo 2: Combinando a propriedade writing-mode

A posição do final da borda direcional inline é afetada por writing-mode Impacto da propriedade:

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

Experimente você mesmo

Exemplo 3: Combinando a propriedade direction

A posição do final da borda direcional inline é afetada por direction Impacto da propriedade:

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

Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Valor	Descrição
color	A cor da borda deve ser especificada. O valor padrão é a cor atual do elemento. Veja:Valores de Cor CSS.
transparent	A cor da borda deve ser transparente.
initial	Defina essa propriedade como seu valor padrão. Veja: initial.
inherit	Herda essa propriedade do elemento pai. Veja: inherit.

Detalhes técnicos

Valor padrão:	A cor atual do elemento
Herança:	Não
Produção de animação:	Suporte. Veja:Propriedades relacionadas a animação.
Versão:	CSS3
Sintaxe do JavaScript:	object.style.borderInlineEndColor="pink"