Fronteiras no CSS | Explicado

Quando visitamos um site, às vezes testemunhamos alguns quadros bonitos ao redor do texto que aprimoram a interface do usuário e ajudam a melhorar a interatividade do conteúdo. No CSS, esses quadros são denominados bordas e desempenham um papel significativo no design da web. O CSS fornece várias propriedades de fronteira que nos permitem definir o estilo, a largura, etc.

Esta redação apresenta uma extensa visão geral das seguintes propriedades de fronteira:

• estilo de borda: Usado para definir o estilo da fronteira como pontilhado, sólido, etc.
• Cor da borda: Usado para definir a cor da borda como vermelho, #00FF00, etc.
• largura de fronteira: Usado para definir a largura da borda como grossa, fina, pixel, etc.

Este artigo explicará como usar cada uma das propriedades acima mencionadas com a ajuda de exemplos.

Propriedade do estilo de fronteira do CSS

Uma propriedade que determina como a aparência da fronteira. A propriedade no estilo de fronteira do CSS fornece os seguintes valores:

• escondido: Defina a borda oculta.
• sólido: Defina a borda da linha sólida.
• pontilhado: especifique a borda pontilhada.
• tracejadas: Defina a borda tracejada.
• dobro: Defina a borda da linha dupla.
• sulco: determina a borda ranhurada 3D.
• cume: Defina a borda 3D Ridge.
• inserir: determina a borda 3D inserida
• início: usado para definir a borda do início 3D

Observação: O efeito 3D do sulco, cume, inserção e início depende do valor da cor da fronteira.

Exemplo O código abaixo cria vários parágrafos e implementa todos os valores mencionados acima para mostrar os efeitos de cada propriedade no estilo de fronteira do CSS:

Html

Parágrafo com borda oculta

Parágrafo com borda sólida

Parágrafo com borda pontilhada

Parágrafo com borda tracejada

Parágrafo com borda dupla

Parágrafo com borda de ranhura

Parágrafo com borda de cume

Parágrafo com borda inserida

Parágrafo com fronteira

CSS

.Border oculto
preenchimento: 0;
estilo de fronteira: escondido;

.Border sólido
preenchimento: 0;
estilo de fronteira: sólido;

.Border pontilhado
preenchimento: 0;
estilo de fronteira: pontilhado;

.Border tracejada
preenchimento: 0;
estilo de fronteira: tracejado;

.duplo-border
preenchimento: 0;
estilo de fronteira: duplo;

.Groove-Border
preenchimento: 0;
estilo de fronteira: ranhura;

.Ridge-Border
preenchimento: 0;
estilo de fronteira: cume;

.Inserção de border
preenchimento: 0;
estilo de fronteira: inserção;

.Trimestre-Border
preenchimento: 0;
estilo de fronteira: início;

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

Propriedade da cor da fronteira do CSS

Como o próprio nome indica, ele nos permite especificar a cor da fronteira. A cor pode ser especificada usando nomes de cores predefinidos, valores hexadecimais, etc. A cor de cada lado pode ser modificada individualmente usando propriedades de cor-cor de borda, cor de fronteira, cor de borda-esquerda e cor-de-cor de borda-direita.

Exemplo Vamos considerar a peça de código abaixo dada que especifica a cor da borda usando o código hexadecimal:

Html

Um exemplo simples de cor de fronteira.

CSS

P
estilo de fronteira: tracejado;
cor de borda: #00f;

O código acima gerará o seguinte código:

Vamos estender o código acima um pouco para colorir cada lado da fronteira de maneira diferente.

Html

Um exemplo simples de cor de fronteira.

CSS

P
estilo de fronteira: tracejado;
cor de borda: #00F;
cor-cor de fronteira: #f00;
cor de borda-esquerda: #000;
cor-direita: #0f0;

Teremos a seguinte saída:

Propriedade da largura da fronteira do CSS

A propriedade de largura de fronteira é usada para definir a largura da fronteira. A propriedade da largura da fronteira leva valores em termos de pixels ou um valor predefinido como grosso, fino, etc.

Exemplo Vamos considerar o código abaixo que especifica a largura da borda como 2 pixels:

Html

Um exemplo simples de largura de fronteira.

CSS

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

Teremos a seguinte saída:

Propriedade do Rádio de Fronteira CSS

A propriedade de Radio de Fronteira Especifica uma borda arredondada para um elemento e o comprimento determina a forma de seus cantos.

Exemplo Vamos considerar a parte do código abaixo que especifica o radiato de fronteira como 10 pixels:

Html

Um exemplo simples de raio de fronteira.

CSS

P
borda: 2px sólido;
Radio de fronteira: 10px;

Saída

A saída verifica que a propriedade Radius de fronteira fornece uma forma arredondada ao canto da fronteira:

Propriedade abreviada da fronteira do CSS

O CSS fornece uma propriedade abreviada para largura, estilo e cor da fronteira, o que nos permite implementar todas essas propriedades de fronteira em uma única linha.

Exemplo

No código abaixo, implementamos várias propriedades em uma única linha CSS usando a propriedade abreviada:

Html

Um exemplo de propriedade de abreviação de fronteira de fronteira.

CSS

P
borda: 3px azul sólido;

Em vez de implementar cada propriedade da fronteira individualmente, o código acima implementa a largura da borda,

A saída verificou que a propriedade abreviada implementou todas as três propriedades de fronteira com sucesso.

Conclusão

O CSS fornece propriedades de largura de fronteira, estilo de fronteira e cor de fronteira para definir a largura da borda, o estilo de borda e a cor da borda de um elemento HTML, respectivamente. Este artigo fornece uma visão abrangente das fronteiras do CSS e discute como criar uma borda, definir a cor da borda, modificar o estilo da fronteira e definir a largura da borda com a ajuda de exemplos simples e fáceis de entender.