Atributo border-block-end-style do CSS

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

Definição e uso

border-block-end-style é usada para definir o estilo da borda do elemento no extremo final da direção do bloco.

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

Nota：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-style 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 o estilo da borda no extremo do bloco direcional：

div {
  border-block-end-style: dotted;
}

Experimente você mesmo

Exemplo 2: Combinar propriedade writing-mode

A posição do estilo de borda no extremo da direção do bloco é afetada por writing-mode Impacto da propriedade：

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

Experimente você mesmo

Sintaxe do CSS

border-block-end-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Valor da propriedade

Valor	Descrição
none	Valor padrão. Especifique borda nenhuma.
hidden	Igual a "none", mas diferente na resolução de conflitos de borda do elemento da tabela.
dotted	Especifica uma borda pontilhada.
dashed	Especifica uma borda pontilhada.
solid	Especifica uma borda sólida.
double	Especifica uma borda dupla.
groove	Especifica uma borda sulcada 3D. O efeito depende do valor de border-color.
ridge	Especifica uma borda ondulada 3D. O efeito depende do valor de border-color.
inset	Especifica uma borda encaixada 3D. O efeito depende do valor de border-color.
outset	Especifica um borda convexa 3D. O efeito depende do valor de border-color.
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：	none
Herança：	Não
Criação de animação：	n. Leia sobre animável
Versão：	CSS3
Sintaxe do JavaScript：	object.style.borderBlockEndStyle="dotted"