CSS Border Radius: Formas, Blobs e Cantos Criativos
Explore border-radius de simples cantos arredondados até formas blob complexas com a sintaxe completa de 8 valores.
CSS border-radius é muito mais poderoso do que a maioria dos desenvolvedores percebe. Além de simples cantos arredondados existe uma sintaxe completa de 8 valores para formas orgânicas.
Cada canto pode ter raios horizontais e verticais independentes, permitindo formas fluidas e orgânicas.
Sintaxe border-radius (1-4 valores)
border-radius aceita 1 a 4 valores usando a abreviatura CSS padrão. Um valor: todos os quatro cantos iguais. Dois valores: primeiro para cima-esquerda e baixo-direita.
Ferramenta gratuita Gerador de Border Radius Crie formas personalizadas e bordas blob com saída CSS ao vivoAbreviada e estendida
A abreviatura border-radius define todos os cantos de uma vez. As propriedades estendidas definem cantos individuais: border-top-left-radius, etc.
Sintaxe de 8 valores para formas assimétricas
A sintaxe de 8 valores usa uma barra para separar raios horizontais e verticais: border-radius: Ah Bh Ch Dh / Av Bv Cv Dv.
Ferramenta gratuita Gerador de Box Shadow Crie sombras box CSS em camadas com pré-visualização ao vivoCriando círculos e pílulas
Para um círculo: defina border-radius: 50% em um elemento quadrado. Para uma pílula: defina border-radius: 9999px em um elemento retangular.
Técnica de formas blob
Formas blob usam a sintaxe de 8 valores com valores assimétricos: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%.
Padrões de design UI
Padrões border-radius comuns: 4-8px para cantos sutis de cartões, 12-16px para cartões proeminentes, 50% para círculos de avatar, 9999px para chips.
Ferramenta gratuita Gerador de Glassmorphism Crie efeitos UI de vidro fosco com CSS backdrop-filter