Lados de fronteira no CSS

As fronteiras cercam um elemento HTML para destacar o conteúdo do elemento. Uma borda tem número de lados de acordo com o respectivo elemento (geralmente são quatro). Os lados da fronteira no CSS permitem representar os lados em estilo específico, como pontilhados, tracejados, etc. Este artigo fornece um guia para fornecer os seguintes resultados de aprendizado.

• estilizar lados individuais de fronteira em CSS
• estilizando vários lados de fronteira em CSS

Como estilizar os lados da fronteira no CSS

Esta seção contém o uso da propriedade lateral das fronteiras em vários cenários.

Como estilizar um lado de fronteira no CSS

Esta seção pratica as propriedades denominadas no estilo de borda, no estilo de borda, no estilo de borda, no estilo de borda e no estilo de borda e no fundo da fronteira.

estilo de borda: value; // para estilizar a borda superior
estilo de borda-direita: value; // para estilizar a borda direita
estilo de fundo de borda: value; // para estilizar a borda inferior
estilo de borda-esquerda: value; // para estilizar a borda esquerda

O valor das propriedades acima pode ser pontilhado, tracejado, sólido, duplo, ranhura etc.,

O código fornecido abaixo faz uso das propriedades acima mencionadas.

a propriedade no estilo de fronteira

a propriedade de estilo de fronteira

A propriedade no estilo de fronteira

a propriedade ao estilo de borda esquerda

O código é explicado como,

• Quatro classes CSS são criadas denominadas "Top", "Right", "Bottom" e "Left"
• Cada classe está associada a diferentes propriedades, como a classe "top", utiliza a propriedade no estilo de borda e assim por diante.
• Essas classes CSS são então incorporadas em quatro parágrafos diferentes

Saída:

Como definir o mesmo estilo para todos os lados da fronteira

Você teria que mencionar apenas um padrão de estilo na propriedade de estilo de fronteira do CSS. Para facilitar, escrevemos sintaxe desta propriedade específica de lados de fronteira:

estilo de borda: value;

O código a seguir define o estilo de cada lado da fronteira para sólido.

Bem -vindo ao Linuxhint

A imagem do código é fornecida abaixo:

Saída:

Como definir o mesmo estilo para lados opostos da fronteira

Para fazer isso, a seguinte sintaxe o ajudaria.

estilo de borda: value1 value2;

O valor1 mudará o estilo das bordas superior e inferior, enquanto o valor2 refere -se à parte inferior esquerda e direita.

O código a seguir pratica esta propriedade de estilo do CSS:

Bem -vindo ao Linuxhint

As bordas superior e inferior seriam estilizadas em sólido, enquanto a direita, as fronteiras esquerdas serão pontilhadas.

A imagem do código é fornecida abaixo:

Saída:

Como estilizar a fronteira usando três valores

Se o número de valores for três, os valores 1º e 3º estilizariam a parte superior e inferior, enquanto o segundo valor pertence aos lados direito/esquerdo.

estilo de borda: value1 value2 value3;

Valor1 para o topo, valor2 para baixo e valor3 para estilos esquerdo/direito no lado inferior. O exemplo a seguir usa a sintaxe acima para estilizar três lados de fronteira:

Bem -vindo ao Linuxhint

O código estiliza as fronteiras superior, direita e inferior para sólidas, pontilhadas e tracejadas, respectivamente.

Saída:

Como definir estilos diferentes para cada lado da fronteira

A sintaxe a seguir ajuda a mudar o estilo de fronteira de cada lado.

estilo de borda: valor1 valor2 valor3 valor4;

O valor1 e o valor3 consulte as bordas superior e inferior, enquanto o valor2 e o valor4 são para o fundo esquerdo e direito.

Os seguintes práticas de código para estilizar todos os lados de fronteira no CSS.

Bem -vindo ao Linuxhint

O código acima muda o estilo de cima e de baixo para sólido e pontilhado. No entanto, as fronteiras direita e esquerda serão estilizadas e sólidas, respectivamente.

A imagem do código acima é fornecida abaixo:

Saída:

Conclusão

Os elementos no HTML podem ser fechados em uma borda e os lados da fronteira podem ser manipulados usando as várias propriedades do CSS. Este artigo fornece a demonstração de lados de fronteira no CSS. Os lados da fronteira podem ser tracejados, pontilhados ou sólidos. Você pode definir o mesmo estilo para todas as fronteiras, estilos diferentes para todas as fronteiras ou definir o mesmo estilo para cima/inferior e direita/esquerda. Para melhores entendimentos, também fornecemos os exemplos que ilustram os cenários acima.