Atributo border-block-start do CSS

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

Definição e uso

border-block-start A propriedade é a abreviação das seguintes propriedades:

CSS border-block-start as propriedades e border-bottom、border-left、border-right e border-top As propriedades são muito semelhantes, mas border-block-start A propriedade depende da direção de bloco.

Anotação：propriedades CSS relacionadas writing-mode Define a direção de bloco. Isso afeta a posição de início e fim do bloco, bem como border-block-start O resultado 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 largura, cor e estilo da borda no início da direção de bloco：

div {
  border-block-start: 10px solid pink;
}

Experimente você mesmo

Exemplo 2: Combinando a propriedade writing-mode

A posição da borda no início da direção de bloco é afetada por writing-mode Efeito da propriedade：

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

Experimente você mesmo

Sintaxe do CSS

border-block-start: border-block-start-width border-block-start-style border-block-start-color|initial|inherit;

Valor do atributo

Valor	Descrição
border-block-start-width	Especifique a largura da borda no início da direção de bloco do elemento. O valor padrão é medium.
border-block-start-style	Especifique o estilo da borda no início da direção de bloco do elemento. O valor padrão é none.
border-block-start-color	Especifique a cor da borda no início da direção de bloco do elemento. O valor padrão é a cor atual da borda.
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：	medium none currentcolor
Herança：	Não
Produção de animação：	Suportado. Consulte：Atributos relacionados a animação。
Versão：	CSS3
Sintaxe do JavaScript：	object.style.borderBlockStart="pink dotted 5px"