Propriedade border-inline-start-color do CSS

página anterior border-inline-start
Próxima página border-inline-start-style

Definição e uso

border-inline-start-color a propriedade configure a cor da borda do elemento no início da direção inline.

Nota:Para que border-inline-start-color A propriedade deve estar ativa, deve ser configurada border-inline-start-style propriedade。

CSS border-inline-start-color propriedade e cor de borda-inferior,cor de borda-esquerda,cor de borda-direita e border-top-color As propriedades são muito semelhantes, mas border-inline-start-color A propriedade depende da direção inline.

Nota:propriedades CSS relacionadas writing-mode,text-orientation e direction Define a direção inline. Isso afeta a posição de início e fim de uma linha, bem como border-inline-start-color O 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

Defina a cor da borda no início da direção inline:

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

Experimente você mesmo

Exemplo 2

usando a propriedade writing-mode

A posição da borda no início da direção inline é afetada por writing-mode Atribuição de propriedade:

div {
  border-inline-start-style: solid;
  writing-mode: vertical-rl;
  border-inline-start-color: 5px;
}

Experimente você mesmo

Exemplo 3

usando a propriedade direction

A posição da borda no início e no final da direção inline é afetada por direction Atribuição de propriedade:

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

Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Valor	Descrição
color	Defina a cor da borda. O padrão é a cor atual do elemento. Consulte:Valores de cores CSS.
transparent	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.borderInlineStartColor="pink"