Círculo CSS com borda

Formas são frequentemente usadas em design da web. Mais especificamente, a forma do círculo é usada para chamar a atenção do usuário e destacar algo, como imagens de perfil são principalmente incorporadas em um quadro de círculo. O CSS oferece várias propriedades de estilo para os elementos para que pareçam melhores para o aplicativo como o “Radio de fronteira”A propriedade é utilizada para fazer as bordas do elemento e o“fronteira”Propriedade define a fronteira do elemento.

Este artigo irá instruir você:

• Como criar um círculo com borda no CSS?
• Como adicionar cor no círculo delimitado usando CSS?
• Como ajustar o estilo de fronteira de um círculo com CSS?

Como criar um círculo com borda no CSS?

Para criar um círculo com uma borda no CSS, primeiro, a propriedade da fronteira é usada para aplicar a borda ao redor do elemento. O "Radio de fronteiraA propriedade é usada para fazer a forma circular da fronteira.

Para esse fim, passe pelo exemplo fornecido.

Crie um arquivo HTML

Primeiro, adicione um “”Elemento e atribui uma classe“Circle-Div”:

Classe de estilo “Circle-Div”

Acesse o "”Contêiner com a ajuda da classe especificada“.Circle-Div”E aplique as seguintes propriedades:

.Circle-Div
Largura: 200px;
Altura: 200px;
Radio de fronteira: 50%;
borda: 5px RGB sólido (119, 0, 255);

Aqui:

• ““largura”Especifica a largura do círculo.
• ““altura”Determina a altura do círculo.
• ““Radio de fronteira"Com o valor"50%”Significa a borda do círculo.
• ““fronteira”É utilizado para aplicar uma borda com a largura, estilo e cor da borda especificada.

Saída

Como adicionar cor no círculo delimitado usando CSS?

O CSS “cor de fundo”A propriedade é utilizada para adicionar cores ao círculo da seguinte forma:

Background-Color: Lightsegreen;

Saída

Como ajustar o estilo de fronteira de um círculo com CSS?

Ao especificar o estilo de fronteira, podemos estilizar a fronteira do círculo. Alguns estilos de borda freqüentemente usados ​​estão listados abaixo:

• Pontilhado
• Sólido
• Sulco
• Inserir
• Início
• Dobro

Borda pontilhada

Defina o estilo de fronteira como “pontilhado”Para especificar a borda pontilhada:

borda: 5px rgb pontilhado (252, 87, 170);

Saída

Borda do sulco

Aplique o estilo de fronteira “sulco”Na propriedade de fronteira:

fronteira: 10px RGB (187, 181, 226);

Saída

Demonstramos com sucesso como criar e estilizar o círculo fronteiriço no CSS.

Conclusão

Para criar um círculo com fronteiras, duas principais propriedades CSS são utilizadas. Para criar uma fronteira, primeiro, adicione um recipiente "div" e acesse -o no CSS usando sua respectiva classe. Então, aplique o CSS “Radio de fronteiraPropriedade e ajuste -a para “50%”Para criar um círculo e o CSS“fronteira”A propriedade é utilizada para definir uma borda ao redor do círculo. Este blog explicou o método para criar um círculo com fronteiras no CSS.