Construir um site atraente não é uma tarefa fácil, um desenvolvedor precisa tentar várias coisas para criar um site atraente, como diferentes origens, estilos, fronteiras, etc.

A borda do CSS pode ser usada em torno do conteúdo para melhorar a aparência do conteúdo. As propriedades da fronteira nos permitem determinar a área de fronteira de um (s) elemento (s). Uma borda pode ser especificada com vários estilos, como uma linha sólida, traços, etc.

Este artigo fornecerá uma visão abrangente da propriedade de largura de fronteira. Inicialmente, elabora como os valores predefinidos funcionam com a propriedade de largura de fronteira. E depois, demonstra o funcionamento da propriedade de largura de fronteira usando alguns valores especificados.

Propriedade da largura da fronteira

A propriedade de largura de fronteira determina a largura da fronteira de um elemento. Especifica a largura da fronteira nas quatro direções i.e. superior, inferior, direita e esquerda. Todo valor atribuído à propriedade de largura de fronteira será especificado para todos os lados.

Sintaxe
A sintaxe da propriedade de largura de fronteira é descrita no trecho abaixo de dado:

largura de fronteira: tamanho;

O tamanho da largura pode ser especificado usando alguns valores predefinidos, como grossos, finos, médios ou na forma de pixels, pontos, centímetros, etc.

Vamos considerar alguns exemplos para ter uma profunda compreensão da propriedade de largura de fronteira no CSS.

Como atribuir largura de fronteira usando valores predefinidos

No CSS, podemos especificar o tamanho da borda usando os valores predefinidos, como grossos, finos, médios.

Exemplo
A peça de código abaixo do rumo define o tamanho da borda de

, e

elemento usando valores predefinidos:

CSS

H1
estilo de fronteira: sólido;
largura da borda: espessa;

P
estilo de fronteira: sólido;
largura da fronteira: médio;

Html

Largura da fronteira usando valores predefinidos

Primeiro parágrafo

Segundo parágrafo

Produzirá a seguinte saída:

Como adicionar largura de fronteira usando valores específicos

No CSS, podemos atribuir um tamanho específico para definir a largura da fronteira (i.e. px, cm, etc.).

Exemplo
A seguir o código define a largura da borda de

elemento em PX e largura de borda de

em cm:

CSS

H1
estilo de fronteira: sólido;
largura de fronteira: 0.1cm;

P
estilo de fronteira: sólido;
largura de borda: 1px;

Html

Largura da fronteira usando valores predefinidos

Primeiro parágrafo

Segundo parágrafo

Teremos a seguinte saída para o código acima:

Como atribuir larguras laterais específicas

No CSS, as larguras laterais específicas podem ser atribuídas à propriedade de largura da fronteira. Por padrão, a propriedade da largura da fronteira define a largura da borda igual para todos os quatro lados. No entanto, podemos especificar a largura de cada lado na ordem superior, direita, inferior e esquerda.

Exemplo
Este exemplo atribui quatro valores à propriedade de largura de fundo primeiro para a borda superior, segundo para a borda direita, terceira para o fundo e a última para a borda esquerda:

CSS

H1
estilo de fronteira: sólido;
largura de fronteira: 0.3cm 0.2cm 0.1 0.2;

P
estilo de fronteira: sólido;
largura de borda: 3px 2px 1px 1px;

Hmtl

Largura da fronteira usando valores predefinidos

Primeiro parágrafo

Segundo parágrafo

O código acima produzirá a seguinte saída:

Exemplo 2
Este exemplo atribui dois valores à propriedade de largura de fundo:

• O primeiro valor especifica o tamanho para o topo e o fundo
• Segundo valor especifica o tamanho para o lado esquerdo e direito

CSS

H1
estilo de fronteira: sólido;
largura de fronteira: 0.2cm 0.1cm;

P
estilo de fronteira: sólido;
largura de borda: 2px 1px;

Html

Largura da fronteira usando valores predefinidos

Primeiro parágrafo

Segundo parágrafo

O código indicado acima mostra a seguinte saída:

Uma diferença clara nos lados (superior, inferior) e (esquerda, direita) pode ser observada na saída.

Conclusão

A propriedade de largura de fronteira define todas as quatro fronteiras de um elemento. Se a propriedade da largura da fronteira tiver um valor, ela definirá a mesma borda para todos os quatro lados. No caso de dois valores, o primeiro valor refere -se à “parte superior e inferior” e o segundo refere -se às fronteiras “esquerda e direita”. Se houver três valores, primeiro refere -se à borda superior, refere -se à borda esquerda e direita, enquanto o terceiro se refere à borda inferior. Se houver quatro valores, o pedido girará no sentido horário i.e. topo, direita, inferior, esquerda.

Este artigo apresentou uma diretriz para definir a largura da fronteira usando valores predefinidos e valores especificados. Depois, este artigo explicou como definir um tamanho único de borda para cada lado.