Atributo border-block-start-color do CSS

Definição e uso

border-block-start-color A propriedade define a cor da borda no início da direção do bloco do elemento.

Nota:Para fazer border-block-start-color A propriedade entra em vigor, é necessário definir border-block-start-style propriedades.

CSS border-block-start-color as propriedades e as propriedades CSS border-bottom-color,border-left-color,border-right-color e border-top-color Muito semelhante, mas border-block-start-color A propriedade depende da direção do bloco.

Nota:as propriedades CSS relacionadas writing-mode Define a direção do bloco. Isso afeta a posição de início e fim do bloco, bem como border-block-start-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 início da direção do bloco:

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

Experimente você mesmo

Exemplo 2: Combinando a propriedade writing-mode

A posição da cor da borda no início da direção do bloco é afetada por writing-mode Impacto da propriedade:

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

Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Valor Descrição
cor 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.borderBlockStartColor="pink"

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa propriedade.

Chrome Edge Firefox Safari Opera
69.0 79.0 41.0 12.1 56.0

Páginas relacionadas

Tutorial:Bordas CSS

Referência:Atributo border do CSS

Referência:Atributo border-block do CSS

Referência:Atributo border-block-color do CSS

Referência:Atributo border-block-end-color do CSS

Referência:Atributo border-block-start-style do CSS

Referência:Atributo border-bottom-color do CSS

Referência:Atributo border-left-color CSS

Referência:Atributo border-right-color CSS

Referência:Atributo border-top-color CSS

Referência:A propriedade CSS writing-mode