Propriedade Style borderWidth

Definição e uso

borderWidth A propriedade define ou retorna a largura da borda do elemento.

Esta propriedade pode usar de um a quatro valores:

  • Um valor, por exemplo: p {border-width: grossa} - Todas as quatro bordas são grossas
  • Dois valores, por exemplo: p {border-width: thick thin} - Borda superior e inferior grossas, bordas laterais finas
  • Três valores, por exemplo: p {border-width: thick thin medium} - Borda superior grossa, bordas laterais finas, borda inferior média
  • Quatro valores, por exemplo: p {border-width: thick thin medium 10px} - Borda superior grossa, borda direita fina, borda inferior média, borda esquerda 10px

Veja também:

Tutorial do CSS:Borda do CSS

Manual do CSS:Propriedade border-width

Manual do HTML DOM:Propriedade border

Exemplo

Exemplo 1

Mude a largura das quatro bordas do elemento <div>:

document.getElementById("myDiv").style.borderWidth = "thick";

Experimente você mesmo

Exemplo 2

Mude a largura da borda superior e inferior do elemento <div> para grossa e a largura da borda lateral para fina:

document.getElementById("myDiv").style.borderWidth = "thick thin";

Experimente você mesmo

Exemplo 3

Use valores de comprimento para alterar a largura das quatro bordas do elemento <div>:

document.getElementById("myDiv").style.borderWidth = "1px 5px 10px 20px";

Experimente você mesmo

Exemplo 4

Retorne a largura da borda do elemento <div>:

alert(document.getElementById("myDiv").style.borderWidth);

Experimente você mesmo

Sintaxe

Retorne a propriedade borderWidth:

object.style.borderWidth

Defina a propriedade borderWidth:

object.style.borderWidth = "thin|medium|thick|length|initial|inherit"
Valor Descrição
thin Define borda fina.
medium Define borda média. Padrão.
thick Define borda grossa.
length Largura da borda medida em comprimento.
initial Defina essa propriedade como seu valor padrão. Veja também initial
inherit Herda essa propriedade do elemento pai. Veja também inherit

Detalhes técnicos

Valor padrão: medium
Retorno: Cadeia de caracteres, que representa a largura da borda do elemento.
CSS versão: CSS1

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte