Algo errado nesta ferramenta?
Sobre «CSS Border Radius Generator Online»
Esta ferramenta ajuda você a criar valores de border-radius com pré-visualização visual. Use controles de canto individuais para formas assimétricas, arraste porcentagens para formas de blob orgânicas, ou escolha de presets comuns (arredondado, pill, círculo).
border-radius dá aos elementos suas bordas arredondadas. Além do arredondamento uniforme simples, designs modernos usam raios elípticos, especificações por canto, e até porcentagens assimétricas para criar formas orgânicas usadas em ilustração e elementos decorativos.
A saída funciona em qualquer contexto CSS — botões, cartões, imagens, containers. Você pode copiar como shorthand (border-radius: ...) ou longhand para cada canto dependendo da sua preferência de estilo.
Como usar esta ferramenta
Como montar um border-radius para 4 cantos
Cada canto
"Top-left", "Top-right", "Bottom-right", "Bottom-left" aceitam o raio em pixels do canto correspondente. A ordem segue a shorthand CSS: começa em top-left e segue horário.
Executar
Resultado: um único campo `css` — `<tl>px <tr>px <br>px <bl>px`. Cole como valor de `border-radius:`. Se os quatro valores forem iguais você poderia usar um único número, mas a ferramenta sempre emite a forma com 4 valores.
Truques assimétricos
Cantos diferentes geram formas comuns de UI: balão de chat com um canto em 0 (`12 12 12 0`), abas com dois cantos inferiores em 0, botões pill com valor enorme à esquerda+direita e 0 em cima+baixo — ou mais simples, um valor enorme igual tipo `9999`.
Raios elípticos
CSS suporta raios elípticos por canto com `tl-x/tl-y` (`12px/24px`) para elipses assimétricas. Esta ferramenta só emite cantos circulares (valor único) — edite à mão para elípticos.