Atributo border-block-color do CSS

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

Definição e uso

border-block-color Configurar a cor da borda do elemento no sentido do bloco.

O atributo depende da direção do bloco.Para que border-block-color O atributo deve ser configurado para entrar em vigor border-block-style.

border-block-color Os valores dos atributos podem ser configurados de diferentes maneiras:

A cor da borda do fim do bloco for lightblue border-block-color Os atributos têm dois valores:

border-block-color: pink lightblue;

块起始处的边框颜色为 pink
A cor da borda do início do bloco é pink

A cor da borda do fim do bloco for lightblue border-block-color Se

border-block-color: pink;

O atributo tem um valor:

As cores das bordas de início e fim do bloco são pink border-block-color da CSS Os atributos eborder-left-colorborder-bottom-colorborder-left-color, border-right-color e border-top-color border-block-color Os atributos são muito semelhantes, mas

O atributo depende da direção do bloco.Atenção: Atributos CSS relacionados Define a direção do bloco. Isso afeta a posição de início e fim do bloco e border-block-color O resultado do atributo. 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 na direção do bloco:

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

Experimente você mesmo

Exemplo 2: Combinando o atributo writing-mode

A posição de início e fim da cor da borda na direção do bloco é afetada pelo atributo writing-mode:

div {
  writing-mode: vertical-rl;
  border-block-color: blue;
}

Experimente você mesmo

Sintaxe CSS

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

Valor do atributo

Valor	Descrição
color	Especifique a cor da borda. A cor padrão é a cor atual do elemento. Veja os valores de cor CSS para obter uma lista completa de valores de cor.
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:	Suportado. Veja:Atributos relacionados a animação.
Versão:	CSS3
Sintaxe do JavaScript:	object.style.borderBlockColor="pink"