Crie border-radius CSS simples, por canto ou em forma de blob com pré-visualização ao vivo. Tudo roda no seu navegador.
Gerador de CSS Border Radius Online
Crie border-radius CSS simples, por canto ou em forma de blob com pré-visualização ao vivo. Tudo roda no seu navegador.
O Gerador de CSS Border Radius roda inteiramente no seu navegador. Os valores que você digita e o CSS que você gera nunca saem do seu dispositivo e não são enviados para a ArrayKit.
O Gerador de CSS Border Radius cria uma declaração border-radius que você pode colar direto na sua folha de estilos, com uma pré-visualização ao vivo que se atualiza conforme você ajusta os valores. Alterne entre o modo Simples para um único raio nos quatro cantos, o modo Por canto para arredondar cada canto de forma independente, e o modo Blob para a forma elíptica de oito valores usada por designers para simular uma forma orgânica, desenhada à mão. Escolha px, % ou rem, arraste os valores, ou clique em Aleatório no modo Blob para explorar formas que você não digitaria manualmente. É útil para botões, cards, avatares, blobs de destaque e qualquer componente em que os cantos arredondados precisem ficar exatamente certos antes de você aplicar o CSS. Feito para desenvolvedores front-end e designers que querem feedback visual instantâneo. Tudo roda localmente no seu navegador — nenhum estilo ou marcação é enviado para fora.
Recursos
O modo Simples arredonda os quatro cantos com um único valor e um slider
O modo Por canto define superior-esquerdo, superior-direito, inferior-direito e inferior-esquerdo de forma independente
O modo Blob gera o border-radius elíptico de 8 valores para formas orgânicas
Botão Aleatório com um clique no modo Blob para explorar formas rapidamente
Alterne entre as unidades px, % e rem nos modos Simples e Por canto
A pré-visualização quadrada ao vivo se atualiza instantaneamente a cada mudança
Declaração CSS pronta para copiar com um clique
Roda inteiramente no seu navegador, sem envio de CSS para fora
Como usar Gerador de Border Radius
Escolha o modo Simples, Por canto ou Blob
Ajuste o slider, os campos numéricos ou os percentuais do blob
Veja a pré-visualização ao vivo se atualizar em tempo real
Copie a declaração border-radius gerada
Exemplo
Entrada
all corners 12px
Saída
border-radius: 12px;
Quatro cantos iguais se combinam em um único valor de border-radius.
Erros comuns e solução de problemas
A forma blob parece um retângulo arredondado em vez de uma forma orgânica. — Garanta que os percentuais horizontal e vertical sejam diferentes em cada canto — valores H e V iguais em todos os cantos geram apenas uma forma arredondada simples.
O CSS por canto colapsa de volta para um único valor inesperadamente. — Isso é esperado: quando os quatro cantos coincidem, o Gerador de CSS Border Radius emite a forma abreviada de um único valor em vez de repetir o mesmo número quatro vezes.
Um raio em percentual parece diferente em um elemento que não é quadrado. — O border-radius em percentual é relativo à largura e altura do próprio elemento, então o mesmo valor percentual renderiza de forma diferente num retângulo largo e num quadrado — teste com a proporção real do seu elemento.
O canto arredondado desaparece em um elemento muito pequeno. — O border-radius é limitado à metade do lado mais curto do elemento, então um raio grande em px numa caixa pequena simplesmente vira uma pílula ou um círculo completo em vez de transbordar.
Perguntas frequentes
O que o modo Blob do Gerador de CSS Border Radius realmente produz?
Ele produz a sintaxe elíptica de border-radius de 8 valores — quatro percentuais horizontais, uma barra e depois quatro percentuais verticais, um par por canto — que é o truque padrão para formas orgânicas com aparência desenhada à mão em CSS.
O Gerador de CSS Border Radius consegue gerar saída em percentual ou rem em vez de pixels?
Sim. Os modos Simples e Por canto permitem trocar a unidade entre px, % e rem, e a pré-visualização ao vivo e o CSS gerado se atualizam imediatamente para acompanhar.
Por que o modo Por canto às vezes gera um único valor em vez de quatro?
Quando os quatro cantos acabam ficando iguais, a ferramenta colapsa automaticamente o border-radius para a forma abreviada de um único valor — é um CSS válido e equivalente que mantém sua folha de estilos mais limpa.
O Gerador de CSS Border Radius envia meu design ou CSS para algum lugar?
Não. Todo o cálculo e a pré-visualização ao vivo rodam localmente no seu navegador. Os valores digitados e o CSS gerado nunca saem do seu dispositivo.
Para que serve o botão Aleatório no modo Blob?
Ele preenche os oito percentuais do blob com novos valores aleatórios em um clique, para você explorar rapidamente variações de formas orgânicas em vez de digitar cada canto manualmente.
O CSS border-radius gerado é compatível com todos os navegadores modernos?
Sim. Tanto a forma abreviada padrão quanto a sintaxe elíptica de blob de 8 valores fazem parte da especificação CSS Backgrounds and Borders e funcionam em todos os principais navegadores atuais.