Este blog irá discutir:

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

O que é o raio do contorno?

O ' contorno ” é usada para moldar o contorno do elemento, mas não pode ser implementada diretamente. Portanto, o método alternativo para aplicar o efeito de raio em um contorno é usar um “ raio da borda ” propriedade CSS. Ele especifica os cantos arredondados para contornos.

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

Para usar a propriedade do raio do contorno, siga as instruções fornecidas.

Etapa 1: incorporar títulos

Inicialmente, incorpore os cabeçalhos utilizando qualquer tag de cabeçalho de “

' para '

”. Por exemplo, utilizamos o “

' e '

” para incorporar dois cabeçalhos diferentes em um documento HTML.

Etapa 2: adicionar o primeiro contêiner div

Depois disso, adicione um contêiner usando o botão “

' marcação. Além disso, insira o “ classe ” e especifique o nome da classe de acordo com sua escolha.

---

---

Etapa 3: criar o segundo contêiner div

Crie outro “ div ” seguindo o mesmo procedimento:

< h1 estilo = 'cor:rgb(48, 10, 218)' > Linuxhint LTD Reino Unido < / h1 >

< h2 >

Diferentes exemplos de border-radius para criar os cantos de uma circular de contorno.

< / h2 >

< div classe = 'box1-div' >

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

< / div >

< div classe = 'box2-div' >

Funciona em várias categorias.

< / div >

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

Etapa 4: defina o contorno do primeiro contêiner

Acesse o primeiro contêiner utilizando o botão “ .box1-div ” classe onde o “ . ” é um seletor para acessar a classe:

.box1-div {

contorno : sólido ;

largura : 300px ;

preenchimento : 15px ;

margem : 25px ;

}

Em seguida, aplique as propriedades CSS listadas abaixo:

• O ' contorno ” é utilizada para adicionar um contorno 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 contorno do segundo contêiner

Agora, acesse o segundo elemento com o auxílio de sua respectiva classe “ .box2-div ”:

.box2-div {

contorno : sólido ;

raio da borda : 20px ;

largura : 300px ;

preenchimento : 15px ;

margem : 25px ;

}

Aplique a propriedade CSS “ raio da borda ” 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 do contorno no elemento HTML.

Conclusão

O ' raio do contorno ' não está mais disponível. Os usuários podem aplicar as propriedades do raio do contorno com a ajuda das propriedades CSS “outline” e “border-radius”. O ' contorno ” adiciona um contorno ao redor do elemento, e o “ raio da borda ” é usado especificamente para estilizar o contorno. Esta postagem demonstrou as instruções para adicionar o efeito de raio de contorno ao redor do elemento em HTML.