Atributo border-block-width do CSS

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

Definição e uso

border-block-width Definir a largura da borda do elemento de configuração do atributo na direção do bloco.

Nota:Para que border-block-width Para que o atributo funcione, deve ser configurado border-block-style.

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

Se border-block-width Os atributos têm dois valores:

border-block-width: 10px 50px;

A largura da borda no início do bloco é de 10px
A largura da borda no final do bloco é de 50px

Se border-block-width A propriedade tem um valor:

border-block-width: 10px;

A largura da borda no início e no final do bloco é de 10px

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

Nota:propriedades CSS relacionadas writing-mode Define a direção do bloco. Isso afeta o início e o final do bloco, bem como border-block-width 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 largura da borda na direção do bloco:

#example1 {
  border-block-style: solid;
  border-block-width: 10px;
}
#example2 {
  border-block-style: solid;
  border-block-width: thin thick;
}

Experimente você mesmo

Exemplo 2: Combinando a propriedade writing-mode

As bordas no início e no final da direção do bloco são afetadas por writing-mode A propriedade afeta:

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

Experimente você mesmo

Sintaxe do CSS

border-block-width: medium|thin|thick|length|initial|inherit;

Valor da propriedade

Valor	Descrição
medium	Especifica a borda média. Valor padrão.
thin	Especifica a borda fina.
thick	Especifica a borda grossa.
length	Permite que você defina o espessura da borda. Veja:Unidades CSS.
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:	medium
Herança:	Não
Produção de animação:	Suportado. Veja:Propriedades relacionadas a animação.
Versão:	CSS3
Sintaxe do JavaScript:	object.style.borderBlockWidth="3px 10px"