Atributo border-inline-start-width CSS

Definição e uso

border-inline-start-width A largura da borda no início da direção interna do elemento de configuração da propriedade.

Nota:Para que border-inline-start-width A propriedade deve ser aplicada, é necessário configurar border-inline-start-style propriedades.

propriedades do CSS border-inline-start-width As propriedades são semelhantes às border-bottom-widthborder-left-widthborder-right-width e border-top-width As propriedades são muito semelhantes, mas border-inline-start-width A propriedade depende da direção inline.

Nota:as propriedades CSS relacionadas writing-modetext-orientation e direction Define a direção inline. Isso afeta a posição de início e fim da linha, bem como border-inline-start-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 no início da direção inline:

div {
  border-inline-start-style: solid;
  border-inline-start-width: 10px;
}

Experimente você mesmo

Exemplo 2: Combinando a propriedade writing-mode

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

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

Experimente você mesmo

Exemplo 3: Combinando a propriedade direction

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

div {
  direction: rtl;
  border-inline-start-width: 10px;
}

Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Valor Descrição
medium Especifica uma borda média. Valor padrão.
thin Especifica uma borda fina.
thick Especifica uma borda grossa.
length Permite que você defina a 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.borderInlineStartWidth="10px"

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:Borda do CSS

Referência:Atributo CSS border

Referência:Atributo CSS border-inline

Referência:Atributo CSS border-inline-end-width

Referência:Atributo border-inline-start-style CSS

Referência:Atributo CSS border-bottom-width

Referência:Atributo border-left-width CSS

Referência:Atributo border-right-width CSS

Referência:Atributo border-top-width CSS

Referência:Atributo direction do CSS

Referência:A propriedade text-orientation do CSS

Referência:A propriedade writing-mode do CSS