Atributo border-block-end-color do CSS

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

Definição e uso

border-block-end-color propriedade para definir a cor da borda no final da direção do bloco do elemento.

Atenção:Para usar border-block-end-color A propriedade deve estar ativa, deve ser configurada border-block-end-style propriedade.

A propriedade CSS border-block-end-color é semelhante à propriedade CSS border-bottom-width,border-left-width,border-right-width e border-top-width Muito semelhante, mas border-block-end-color A propriedade depende da direção do bloco.

Atenção:as propriedades CSS relacionadas writing-mode Define a direção do bloco. Isso afeta a posição de início e fim do bloco e border-block-end-color O resultado da propriedade. Para páginas em inglês, a direção inline é de esquerda para direita, e a direção do bloco é para baixo.

Exemplo

Exemplo 1

Defina a cor da borda no final da direção do bloco:

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

Experimente você mesmo

Exemplo 2: Combinando a propriedade writing-mode

A posição da cor da borda no final da direção do bloco é afetada por writing-mode A propriedade afeta:

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

Experimente você mesmo

Sintaxe do CSS

border-block-end-color: cor|transparent|initial|inherit;

Valor da propriedade

Valor	Descrição
cor	Defina a cor da borda. 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:	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.borderBlockEndColor="pink"