Atributo border-width CSS

Definição e uso

A propriedade abreviada border-width define a largura de todas as bordas do elemento ou define a largura de cada borda separadamente.

Só funciona quando o estilo da borda não é none. Se o estilo da borda for none, a largura da borda será resetada para 0. Não é permitido especificar valores de comprimento negativos.

Exemplo 1

border-width:thin medium thick 10px;
  • A borda superior é fina
  • A borda direita é média
  • A borda inferior é grossa
  • A borda esquerda é uma borda de 10px de largura

Exemplo 2

border-width:thin medium thick;
  • A borda superior é de 10px
  • A borda direita e a esquerda são médias
  • A borda inferior é grossa

Exemplo 3

border-width:thin medium;
  • A borda superior e inferior são finas
  • A borda direita e a esquerda são médias

Exemplo 4

border-width:thin;
  • Todas as 4 bordas são finas

Exemplo

Definir a largura de todas as quatro bordas:

p
  {
  border-style:solid;
  border-width:15px;
  }

Experimente você mesmo

Sintaxe do CSS

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

Valor da propriedade

Valor Descrição
thin Define uma borda fina.
medium Padrão. Define uma borda média.
thick Define uma borda grossa.
length Permite que você personalize a largura da borda.
inherit Definir que a largura da borda deve ser herdada do elemento pai.

Mais exemplos

Todas as propriedades de largura da borda em uma única declaração
Este exemplo demonstra como usar a propriedade abreviada para definir a largura de todas as bordas em uma única declaração.

Detalhes técnicos

Valor padrão: medium
Herança: no
Versão: CSS1
Sintaxe do JavaScript: object.style.borderWidth="thin thick"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

Veja também:

Tutorial de CSS:Borda do CSS

Manual de Referência do DOM HTML:Atributo borderWidth