É a propriedade que arredonda os cantos de um elemento. Aceita valores em px, %, rem ou qualquer unidade CSS, e pode controlar os quatro cantos de forma independente.
Gerador de Border Radius CSS
Ajuste o raio de cada canto individualmente — elíptico, uniforme ou blob — com CSS copiável.
A propriedade border-radius do CSS aceita até oito valores distintos quando a notação elíptica é usada — cada canto pode ter raios horizontal e vertical independentes.
Na forma mais simples, border-radius aplica o mesmo raio em todos os quatro cantos. Mas a especificação permite controlar cada canto individualmente e até definir raios horizontal e vertical separados por barra, criando formas elípticas. Com isso é possível construir desde cards com cantos levemente arredondados até shapes orgânicos tipo blob. O valor 50% é o modo mais conhecido — ele transforma qualquer elemento quadrado em círculo perfeito. A notação de quatro valores no shorthand segue a ordem horária: topo-esquerda, topo-direita, baixo-direita, baixo-esquerda, igual ao box-model em geral.
Escolha presets ou ajuste canto a canto.
- Escolha a unidade (px ou %) e toque em um preset para partir de uma forma pronta.
- No modo por canto, ajuste cada canto individualmente. Ative a opção elíptica para raios diferentes em X e Y.
- Copie o CSS gerado e use diretamente no seu projeto.
Fontes e referências desta ferramenta
Estas referências ajudam a contextualizar fórmulas, padrões, APIs e limitações usadas nesta página. Elas não substituem validação profissional quando o resultado tiver impacto jurídico, financeiro, médico ou operacional.