Propriedade border-inline-width do CSS

Página anterior border-inline-style
Próxima página border-left

Definição e uso

border-inline-width O atributo configura a largura da borda do elemento na direção da linha.

Atenção:Para que border-inline-width Para que o atributo funcione, deve ser configurado border-inline-style.

border-inline-width O valor do atributo pode ser configurado de várias maneiras:

Se border-inline-width O atributo tem dois valores:

border-inline-width: 10px 50px;

A largura da borda no início da linha é de 10px
A largura da borda no fim da linha é de 50px

Se border-inline-width O atributo tem um valor:

border-inline-width: 10px;

A largura da borda no início e no fim da linha é de 10px

CSS border-inline-width Atributo e Atributo CSS border-bottom-width,border-left-width,border-right-width e border-top-width Muito semelhante, mas border-inline-width A propriedade depende da direção inline.

Atenção:as propriedades CSS relacionadas writing-mode,text-orientation e direction Define a direção inline. Isso afeta a posição de início e fim de uma linha, bem como border-inline-width 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 da borda na direção inline:

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

Experimente você mesmo

Exemplo 2: Combinado com a propriedade writing-mode

A posição da borda no início e no fim da direção inline é afetada por writing-mode A propriedade afeta:

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

Experimente você mesmo

Exemplo 3: Combinado com a propriedade direction

A posição da borda no início e no fim da direção inline é afetada por direction A propriedade afeta:

div {
  direction: rtl;
  border-inline-width: 5px 15px;
}

Experimente você mesmo

Sintaxe do CSS

border-inline-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.borderInlineWidth="3px 10px"