O que significam os oito valores?

Quatro raios horizontais (um por canto) e quatro raios verticais (também um por canto). Quando o raio horizontal e o vertical de um canto são iguais, o canto é um quarto de círculo. Quando diferem, é um quarto de elipse - e é isso que produz formas blob orgânicas, pontas de folha, talões de ticket e ícones squircle estilo iOS.

O que é um squircle?

Uma aproximação de retângulo arredondado mais suave do que o CSS border-radius consegue nativamente - a forma do ícone da tela inicial do iOS. O mais próximo em CSS puro é usar raios horizontais e verticais desiguais (tipo `border-radius: 30% 30% 30% 30% / 25% 25% 25% 25%`). Squircles verdadeiros precisam de um path SVG ou de um paint worklet do CSS Houdini - a predefinição aqui é a melhor aproximação em CSS.

Por que a sintaxe com barra?

Sem a barra, todos os cantos ganham raios circulares (horizontal = vertical). A barra deixa você definir raios horizontais e verticais distintos por canto - exatamente o sentido de formas assimétricas. Todos os browsers suportam, e é o único jeito de fazer uma forma «folha» (um canto quase quadrado, o oposto quase círculo).

Porcentagens ou pixels?

Sim para porcentagens - escalam com o tamanho do elemento, que é o que se quer para formas que devem manter a proporção. Pixels são previsíveis mas quebram ao redimensionar (um raio de 40 px em um elemento de 30 px é cortado para metade da largura e vira meio círculo). O gerador usa porcentagens para as formas predefinidas sobreviverem ao redimensionamento.

Raios grandes quebram em browsers antigos?

border-radius é suportado em todo browser desde 2010. A sintaxe com barra para raios assimétricos vale desde o IE 9. A única pegadinha moderna é o overflow: `border-radius` não recorta o conteúdo filho a menos que você também coloque `overflow: hidden` no mesmo elemento - caso contrário, imagens e filhos absolutamente posicionados vazam pelos cantos arredondados.

Gerador de border-radius

Border-radius assimétrico com 8 valores de canto, pré-visualização ao vivo e predefinições (pílula, blob, folha, ticket).

Predefinições

Raios horizontais

Topo-esq

Topo-dir

Base-dir

Base-esq

Raios verticais

Topo-esq

Topo-dir

Base-dir

Base-esq

CSS

border-radius: 60% 40% 30% 70% / 30% 70% 60% 40%;

Pré-visualização

Border-radius aceita mais de um número. A forma completa CSS: `border-radius: topo-esq topo-dir base-dir base-esq / topo-esq-v topo-dir-v base-dir-v base-esq-v;` - oito valores para cada canto curvar diferente na horizontal e na vertical. Arraste os sliders, a pré-visualização se reforma em tempo real; os oito números aparecem abaixo. As predefinições carregam as formas clássicas - pílula, blob, folha, ticket, orgânico - para ajustar depois.

Como usar

Escolha uma predefinição ou comece do zero
Pílula, blob, folha, ticket, orgânico, squircle - um clique carrega os valores. Ou pule as predefinições e arraste os sliders.
Ajuste os oito raios
Quatro horizontais, quatro verticais. Valores iguais por canto = círculo; diferentes = elipse.
Redimensione a pré-visualização
Alterne entre quadrado, retângulo largo e alto para confirmar que a forma se mantém em diferentes razões de aspecto.
Copie o CSS
A declaração `border-radius: a b c d / e f g h;` completa está pronta para colar.

O que é?

Um gerador de border-radius constrói a declaração CSS `border-radius` completa com os oito valores possíveis - quatro raios horizontais (um por canto) mais quatro verticais. O resultado permite descrever qualquer combinação de cantos circulares e elípticos em uma única declaração. A estética «blob» e de formas orgânicas onipresente no design web dos anos 2020 é construída sobre border-radius assimétricos - baratos, GPU-friendly, escalam sem rasterizar.

Quando usar

Formas decorativas «blob» orgânicas para landings, botões e tags em pílula, formas de folha e ticket para selos e cupons, cantos de card assimétricos (topo-esq nítido, base-dir arredondado) para designs em camadas, aproximações de squircle para ícones estilo iOS, e em todo lugar onde um simples `border-radius: 8px` fica neutro demais.

Erros comuns

Esquecer `overflow: hidden` no pai - imagens filhas e conteúdo absolutamente posicionado vazam pelas bordas arredondadas. Usar raios em pixels em elementos de largura flexível - o raio não escala com o elemento. Empilhar border-radius com `clip-path` - os dois interagem e geralmente um vence; escolha a ferramenta certa. Animar entre raios muito diferentes sem transição - o salto de redondo para reto parece mecânico.

FAQ

O que significam os oito valores?: Quatro raios horizontais (um por canto) e quatro raios verticais (também um por canto). Quando o raio horizontal e o vertical de um canto são iguais, o canto é um quarto de círculo. Quando diferem, é um quarto de elipse - e é isso que produz formas blob orgânicas, pontas de folha, talões de ticket e ícones squircle estilo iOS.
O que é um squircle?: Uma aproximação de retângulo arredondado mais suave do que o CSS border-radius consegue nativamente - a forma do ícone da tela inicial do iOS. O mais próximo em CSS puro é usar raios horizontais e verticais desiguais (tipo `border-radius: 30% 30% 30% 30% / 25% 25% 25% 25%`). Squircles verdadeiros precisam de um path SVG ou de um paint worklet do CSS Houdini - a predefinição aqui é a melhor aproximação em CSS.
Por que a sintaxe com barra?: Sem a barra, todos os cantos ganham raios circulares (horizontal = vertical). A barra deixa você definir raios horizontais e verticais distintos por canto - exatamente o sentido de formas assimétricas. Todos os browsers suportam, e é o único jeito de fazer uma forma «folha» (um canto quase quadrado, o oposto quase círculo).
Porcentagens ou pixels?: Sim para porcentagens - escalam com o tamanho do elemento, que é o que se quer para formas que devem manter a proporção. Pixels são previsíveis mas quebram ao redimensionar (um raio de 40 px em um elemento de 30 px é cortado para metade da largura e vira meio círculo). O gerador usa porcentagens para as formas predefinidas sobreviverem ao redimensionamento.
Raios grandes quebram em browsers antigos?: border-radius é suportado em todo browser desde 2010. A sintaxe com barra para raios assimétricos vale desde o IE 9. A única pegadinha moderna é o overflow: `border-radius` não recorta o conteúdo filho a menos que você também coloque `overflow: hidden` no mesmo elemento - caso contrário, imagens e filhos absolutamente posicionados vazam pelos cantos arredondados.