Arrendondar os Cantos com Border Radius

0px
0px 0px 0px 0px
Border Radius: 0px 0px 0px 0px

O border-radius é uma propriedade CSS que arredonda os cantos de elementos, proporcionando uma estética suave e moderna. Permite definir o raio de arredondamento individualmente para cada canto.

Guias e Tutoriais sobre Efeitos CSS

Como Usar o Border Radius

O border-radius pode ser aplicado a qualquer elemento HTML, como div, button ou input. Veja um exemplo básico: 


div {
  border-radius: 10px;
}

Este código aplica um raio de 10 pixels a todos os cantos de um div. Você pode personalizar o valor para obter diferentes efeitos visuais.

Exemplos Práticos de Border Radius

Aqui estão alguns exemplos de como o border-radius pode ser usado:

  • Botões: Botões com cantos arredondados ficam mais modernos.
  • Caixas de Entrada: Campos de entrada arredondados proporcionam uma aparência mais suave.
  • Imagens: Imagens com bordas arredondadas adicionam um toque elegante.

Exemplos de Efeitos CSS no Border Radius

Veja como diferentes configurações de border-radius podem alterar a aparência dos elementos:

Quadrado
Cantos Arredondados
Círculo