Muitas formas podem ser utilizadas em nossa página da web para criar um design melhor, como círculos, quadrados, retângulos e mais. Essas formas podem ser criadas usando várias propriedades CSS. Mais especificamente, os cantos arredondados da caixa são mais eficazes do que os cantos pontiagudos, pois fazem nossos olhos seguirem as linhas facilmente.

Este artigo discutirá o procedimento de uso da propriedade CSS Border-Radius para criar caixas com cantos arredondados.

Como criar caixas em html?

Para criar duas caixas, adicione dois elementos de classe de classe com os nomes “Box-1" e "Box-2", e adicione

Elemento com o cabeçalho em cada um dos elementos da div, como segue:

Exemplo da caixa 1

Exemplo da caixa 2

Agora, aplique estilos CSS aos elementos HTML.

Estilo H1 elemento

H1
preenchimento: 50px;

O

O elemento é fornecido com a propriedade de preenchimento como “50px”Para criar o espaço extra especificado dentro do título.

Estilo Box-1 e Box-2 Div Elementos

#Box-1,
#Box-2
margem: 1px automático;
Largura: 250px;
Altura: 120px;
Background-Color: Chocolate;
Size da fonte: 10px;
Cor: Ghostwhite;

As propriedades CSS aplicadas à caixa 1 e da caixa-2 são descritas abaixo:

• ““largura”Propriedade define a propriedade de largura para 250px.
• ““altura”A propriedade é utilizada para o cenário da altura do elemento para 250px.
• ““cor de fundo”A propriedade é utilizada para especificar a cor de fundo do elemento.
• ““tamanho da fonte”A propriedade é utilizada para a configuração do tamanho da fonte do elemento.
• ““cor”A propriedade é utilizada para a configuração da cor da fonte.

Ao fornecer o código acima mencionado, as caixas criadas serão mostradas da seguinte forma:

Pode -se observar que as caixas são criadas, mas seus cantos ainda são apontados. A seção abaixo explicará o uso da propriedade do radiato de fronteira para fazer caixas com cantos arredondados.

O que é a propriedade CSS Border-Radius?

O CSS “Radio de fronteira”A propriedade é utilizada para definir o raio do elemento. Esta propriedade pode consistir em um a quatro valores. Esses valores são explicados abaixo.

Sintaxe- um valor

Radio de fronteira: tudo [ / all];

Uma sintaxe de valor refere -se ao raio dos quatro cantos da caixa.

Sintaxe- dois valores

Radio de fronteira: topo-esquerdo e canto superior direito e canto inferior direito
[ / superior esquerda e parte inferior direita e parte inferior esquerda];

Sintaxe de dois valores Especifique o raio como o primeiro valor indica o raio nos cantos superior esquerdo e inferior direito, e o segundo valor especifica o raio nos cantos superior e inferior esquerdo.

Sintaxe- três valores

Radio de fronteira: parte inferior direita e canto superior direito superior e inferior esquerdo
[ / capa superior direita e canto inferior direito];

Três valores Sintaxe Especifica o primeiro valor representa o canto superior esquerdo, o segundo valor indica os cantos superior e inferior esquerdo e o terceiro valor se aplica ao canto inferior direito.

Sintaxe- quatro valores

Radio de borda: parte superior direita superior direita superior direita-direita
[ / canto superior direito superior direito, canto inferior direito];

Quatro valores Sintaxe Especifica que o primeiro valor é aplicado ao canto superior esquerdo, o segundo valor se aplica ao canto superior direito, o terceiro valor se aplica ao canto inferior direito e o quarto valor se aplica ao canto inferior esquerdo.

Como criar caixas de canto arredondadas usando CSS?

A seção de código abaixo explica como podemos criar caixas de canto redondas.

Estilo Box-1

#Box-1
Background-Color: RGB (255, 183, 0);
Radio de fronteira: 100px 2px 100px 1px;

O elemento Div da Box-1 é aplicado com propriedades descritas abaixo:

• ““cor de fundo”A propriedade é utilizada para definir a cor de fundo do elemento.
• ““Radio de fronteira”Com o valor definido como“100px 2px 100px 1px”Onde 100px indica canto superior esquerdo, 2px indica o canto superior direito, 100px indica canto inferior direito e 1px indica o canto inferior esquerdo.

Estilo Box-2

#Box-2
Background-Color: Darkcyan;
Radio de fronteira: 30px;

As propriedades que são aplicadas ao elemento Div Box-2 são descritas abaixo:

• ““cor de fundo”Propriedade define a cor do elemento Div Box-2 com o“Darkcyan" cor.
• ““Radio de fronteira”Propriedade com o valor definido como“30px”Define o raio da caixa para 30px dos quatro cantos.

Então, para mudar os cantos da caixa, os valores da propriedade de Radius de Fronteira podem ser definidos de acordo. Ao fornecer as propriedades de estilo CSS acima para os elementos da caixa 1 e da caixa-2, o resultado será assim:

Aprendemos com sucesso a propriedade de Radius de fronteira para fazer os cantos redondos de caixas únicas ou múltiplas.

Conclusão

Para criar um design melhor para a nossa página da web, formas diferentes podem ser utilizadas, como círculos, quadrados, retângulos e mais, pode ser criado com CSS. As caixas com cantos arredondados podem ser criados no CSS, utilizando o CSS “Radio de fronteira" propriedade. Este artigo demonstrou o uso do CSS Border-Radius para criar caixas com cantos arredondados com exemplos.