Propriedade border-width

A propriedade border-width define a espessura da borda para todos os lados simultaneamente ou separadamente para cada lado. É uma propriedade abreviada para as propriedades border-left-width, border-right-width, border-top-width, border-bottom-width.

O valor da propriedade pode ser qualquer unidade de medida, exceto porcentagens, ou as palavras-chave thin (borda de 2 pixels), medium (borda de 4 pixels) ou thick (borda de 6 pixels). O valor padrão é: medium.

Sintaxe

seletor {
	border-width: 1, 2, 3 ou 4 valores;
}

Número de valores

A propriedade pode receber 1, 2, 3 ou 4 valores, especificados com espaços:

Quantidade	Descrição
`1`	Espessura para todos os lados simultaneamente.
`2`	Primeiro valor para o topo e a base, segundo - para as bordas esquerda e direita.
`3`	Primeiro valor para o topo, segundo - para as bordas esquerda e direita, terceiro - para a base.
`4`	Primeiro valor para a borda superior, segundo - para a direita, terceiro - para a inferior, quarto - para a borda esquerda.

Exemplo

Vamos definir uma borda com espessura de um pixel:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplo

Vamos definir uma borda com espessura de 4 pixels:

<div id="elem"></div>

#elem {
	border-width: 4px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplo

Vamos definir a espessura da borda superior e inferior como 1px, e a direita e esquerda - como 4px:

<div id="elem"></div>

#elem {
	border-width: 1px 4px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplo

Vamos definir a espessura da borda superior como 1px, direita e esquerda - como 4px, e a inferior como 6px:

<div id="elem"></div>

#elem {
	border-width: 1px 4px 6px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplo

Vamos definir a espessura da borda superior como 1px, direita como 4px, inferior - como 6px, e esquerda como 8px:

<div id="elem"></div>

#elem {
	border-width: 1px 4px 6px 8px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplo

Vamos definir a espessura da borda com a palavra-chave thin:

<div id="elem"></div>

#elem {
	border-width: thin;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplo

Vamos definir a espessura da borda com a palavra-chave medium:

<div id="elem"></div>

#elem {
	border-width: medium;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplo

Vamos definir a espessura da borda com a palavra-chave thick:

<div id="elem"></div>

#elem {
	border-width: thick;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Exemplo

Vamos definir bordas diferentes para lados diferentes:

<div id="elem"></div>

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

Veja também

a propriedade border-style,
que define a aparência da borda
a propriedade border-color,
que define a cor da borda
a propriedade border,
que é a propriedade abreviada para a borda