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

cssseletor {
  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:

Exemplo

Vamos definir uma borda com espessura de um pixel:

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

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

Результат:

Exemplo

Vamos definir uma borda com espessura de 4 pixels:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Exemplo

Vamos definir bordas diferentes para lados diferentes:

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

css#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