Os usuários podem aprimorar o layout de documentos HTML e páginas da web usando CSS. Para esse fim, muitas propriedades do CSS são usadas e "contorno" e "Radius de fronteira" são um deles. Mais especificamente, o “contorno”A propriedade é usada para desenhar o esboço e o“Radio de fronteira”É utilizado para definir os cantos arredondados do elemento delineado.

Este blog discutirá:

• O que é um raio de contorno?
• Como aplicar o efeito do raio de contorno no elemento HTML?

Qual é o raio de contorno?

O "contorno”A propriedade é usada para moldar o contorno do elemento, mas não pode ser implementado diretamente. Portanto, o método alternativo para aplicar o efeito do raio em um esboço é usar um “Radio de fronteiraPropriedade CSS. Especifica os cantos arredondados para contornos.

Como aplicar o efeito do raio de contorno no elemento HTML?

Para usar a propriedade Radius de contorno, siga as instruções fornecidas.

Etapa 1: Chefe de incorporação

Inicialmente, incorpore os títulos utilizando qualquer tag de título de “

" para "

”. Por exemplo, utilizamos o “

" e "

Etapa 2: adicione o primeiro contêiner div

Depois disso, adicione um contêiner usando o “" marcação. Além disso, insira o “aula”Atribua e especifique o nome da classe de acordo com sua escolha.

Etapa 3: Crie Second Div Container

Crie outro “div”Container seguindo o mesmo procedimento:

Linuxhint Ltd UK

Exemplos diferentes para o Radio de Fronteira para criar os cantos de uma circular de esboço.

Linuxhint fornece o melhor e mais exclusivo conteúdo para seus usuários.


Funciona em várias categorias.

A saída do código acima é mostrada abaixo:

Etapa 4: defina o esboço do primeiro contêiner

Acesse o primeiro contêiner utilizando o “.Box1-Div"Classe onde".”É um seletor para acessar a classe:

.Box1-Div
contorno: sólido;
Largura: 300px;
preenchimento: 15px;
margem: 25px;

Em seguida, aplique as propriedades CSS abaixo listadas:

• O "contorno”A propriedade é utilizada para adicionar um esboço ao redor do elemento. Por exemplo, seu valor é definido como “sólido”.
• ““largura”Especifica o tamanho do elemento horizontalmente.
• ““preenchimento”É utilizado para alocar o espaço ao redor do conteúdo do elemento.
• ““margem”Especifique o espaço no lado externo da borda do elemento.

Etapa 5: defina o esboço do segundo contêiner

Agora, acesse o segundo elemento com a ajuda de sua respectiva classe “.Box2-Div”:

.Box2-Div
contorno: sólido;
Radio de fronteira: 20px;
Largura: 300px;
preenchimento: 15px;
margem: 25px;

Aplique a propriedade CSS “Radio de fronteira”Para definir o raio do elemento. Esta propriedade permite adicionar cantos arredondados ao redor do elemento:

Pode -se notar que adicionamos com sucesso o efeito do raio de contorno no elemento HTML.

Conclusão

O "Radio de esboço" não está mais disponível. Os usuários podem aplicar as propriedades do Radius de contorno com a ajuda de propriedades "contorno" CSS e "Radio de Fronteira". O "contorno”Adiciona um esboço ao redor do elemento, e o“Radio de fronteira”É usado especificamente para modelar o esboço. Esta posta.