Border Radius CSS: Guia de Cantos Arredondados

Sintaxe Basica do Border Radius

A propriedade border-radius controla o arredondamento dos cantos de um elemento. Na forma mais simples, um unico valor arredonda todos os quatro cantos: border-radius: 8px.

Voce pode especificar valores diferentes para cada canto: border-radius: 10px 20px 30px 40px, na ordem superior-esquerdo, superior-direito, inferior-direito, inferior-esquerdo. Valores em porcentagem tambem funcionam — border-radius: 50% transforma um quadrado em circulo perfeito.

Criando Formas Avancadas

A sintaxe com barra (/) permite raios elipticos diferentes para os eixos horizontal e vertical: border-radius: 50% / 30%. Isso cria formas ovais e organicas impossiveis com valores simples.

Combinando valores diferentes com raios elipticos, voce cria gotas, folhas, bolhas e formas organicas populares no design moderno. Essas formas sao usadas em backgrounds, avatares e cards.

Praticas Comuns de Design

Para botoes, 4-8px e o padrao mais usado. Botoes completamente arredondados sao populares em apps de banco e fintech. Para cards e containers, 8-16px e comum — o Material Design usa 12px como padrao.

Para imagens de perfil, 50% e universal para circulos. Valores de 20-30% criam o estilo squircle popularizado pela Apple.

Compatibilidade e Performance

Border-radius e suportado por todos os navegadores modernos sem prefixo. Nao ha necessidade de -webkit-border-radius. Em termos de performance, a propriedade e leve, mas combinar border-radius com box-shadow e overflow:hidden pode exigir composicao de camada em elementos grandes.

Gerador de Border Radius

Nosso Gerador de Border Radius permite ajustar visualmente o arredondamento de cada canto e gerar o codigo CSS. Arraste os controles, visualize o resultado e copie o codigo — gratis e sem cadastro.