Atributo border-inline-color do CSS

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

Definição e uso

border-inline-color O atributo configura a cor da borda do elemento na direção da linha.

propriedades CSS relacionadasPara configurar border-inline-color Para que o atributo funcione, deve ser configurado border-inline-style.

border-inline-color O valor do atributo pode ser configurado de várias maneiras:

Se border-inline-color O atributo tem dois valores:

border-inline-color: rosa azul;

A cor da borda de início da linha é rosa
A cor da borda de fim da linha é azul

Se border-inline-color O atributo tem um valor:

border-inline-color: blue;

As cores da borda de início e fim da linha são azuis

do CSS border-inline-color Atributo com border-bottom-color,border-left-color,border-right-color e border-top-color As propriedades são muito semelhantes, mas border-inline-color Nota:

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

Exemplo

Exemplo 1

Definir a cor da borda na direção inline:

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

Experimente você mesmo

Exemplo 2: Combinando a propriedade writing-mode

A borda no início e no fim da direção inline é afetada por writing-mode Impacto da propriedade:

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

Experimente você mesmo

Exemplo 3: Combinando a propriedade direction

A borda no início e no fim da direção inline é afetada por direction Impacto da propriedade:

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

Experimente você mesmo

Sintaxe CSS

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

Valor da propriedade

Valor	Descrição
color	Especificar a cor da borda. A cor padrão é a cor atual do elemento. Ver os valores de cor CSS para obter a lista completa de possíveis valores de cor.
transparent	Especificar a cor da borda deve ser transparente.
initial	Defina essa propriedade como seu valor padrão. Consulte initial.
inherit	Herda essa propriedade do elemento pai. Consulte inherit.

Detalhes técnicos

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