Gerador de CSS Border-Radius

Ajuste cantos arredondados visualmente com pré-visualização ao vivo e código CSS para copiar.

Raios verticais:

px
px 
{{ cssOutput }}

O que é border-radius?

A propriedade CSS border-radius arredonda os cantos de um elemento. Você pode definir um raio uniforme para os quatro cantos ou estilizar cada canto individualmente. A notação abreviada segue a ordem: superior-esquerdo, superior-direito, inferior-direito, inferior-esquerdo.

Raios de borda elípticos

Com a sintaxe estendida border-radius: H1 H2 H3 H4 / V1 V2 V3 V4 você pode definir um raio horizontal e vertical para cada canto. Isso cria curvas elípticas que produzem formas mais orgânicas.

Casos de uso comuns

  • Círculos: border-radius: 50% em um elemento quadrado.
  • Forma de pílula: border-radius: 9999px para botões arredondados.
  • Cards: border-radius: 8px a 16px para designs de cards modernos.
  • Formas blob: Raios horizontais e verticais diferentes para formas orgânicas.