Gerador de border-radius

Transforma um elemento quadrado em um círculo perfeito. Para um círculo verdadeiro, o elemento deve ter largura e altura iguais — por exemplo `width: 100px; height: 100px; border-radius: 50%`. O raio de 50% se encontra no centro em todos os quatro lados, criando uma curva perfeita. Em um elemento não quadrado, 50% cria uma elipse — mais larga do que alta ou mais alta do que larga, dependendo das dimensões do elemento. Esta é a forma mais comum de criar imagens de avatar circulares, botões redondos e containers de ícones no CSS.

Use `border-radius: 9999px` (ou qualquer valor grande como 100px) em um elemento não quadrado, como um botão ou badge. O navegador automaticamente limita o raio à metade da dimensão menor do elemento, fazendo as extremidades curtas virarem semicírculos perfeitos enquanto os lados longos permanecem retos. Isso cria o clássico botão CTA em formato de pílula visto na maioria dos design systems modernos. O truque do `9999px` funciona independentemente do tamanho do elemento — sem necessidade de calcular metade da altura manualmente. A predefinição Pill deste gerador aplica esse padrão instantaneamente.

Valores em pixels são absolutos — um raio de `12px` permanece 12 pixels independentemente do tamanho do elemento. Se o elemento aumentar ou diminuir, o tamanho do canto permanece fixo. Valores percentuais são relativos — `50%` sempre curva até o ponto médio exato de cada lado, produzindo uma forma proporcional que escala com o elemento. Use porcentagem (`50%`) para formas como círculos e pílulas que devem escalar com o elemento. Use pixels para componentes de UI como cards, botões e inputs onde você quer um tamanho de canto consistente e definido pelo design system independentemente do conteúdo.

Um `border-radius` padrão só curva os cantos para fora (convexo). Para um canto invertido ou côncavo — a curva de 'entalhe' ou 'corte' para dentro usada em ingressos, abas e balões de fala — você não pode usar `border-radius` sozinho. A técnica comum é uma máscara de gradiente radial: `mask: radial-gradient(circle 20px at top left, transparent 98%, black) top left / 51% 51% no-repeat ...`, repetida para cada canto que deseja recuar. Uma alternativa é um pseudo-elemento posicionado (`::before`) com a cor de fundo da página e seu próprio `border-radius` convexo, sobreposto sobre o canto para que pareça criar uma forma côncava. Para bordas festonadas ou perfuradas — como a linha de rasgo de um ingresso — uma máscara de gradiente radial repetida ao longo de um lado produz a perfuração festonada. Então 'border-radius invertido' é realmente um truque de mascaramento, não um valor de border-radius — útil saber ao buscar por um gerador de border-radius invertido.

Use as propriedades individuais de canto: `border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius` ou `border-bottom-left-radius`. Por exemplo, `border-bottom-right-radius: 24px` arredonda apenas o canto inferior direito, deixando os outros três com bordas retas. Você pode combiná-los livremente: `border-top-left-radius: 16px; border-bottom-right-radius: 16px` cria uma forma arredondada na diagonal. No shorthand, dois valores definem pares de cantos opostos: `border-radius: 16px 0` arredonda os cantos superior esquerdo e inferior direito, deixando o superior direito e o inferior esquerdo retos.

No sentido horário a partir do canto superior esquerdo: Superior esquerdo → Superior direito → Inferior direito → Inferior esquerdo. Portanto, `border-radius: 16px 8px 0 8px` dá 16px ao superior esquerdo, 8px ao superior direito, 0 ao inferior direito e 8px ao inferior esquerdo. Isso corresponde à direção padrão do shorthand CSS usada por `margin`, `padding` e `border-width`. Com dois valores, o primeiro se aplica ao superior esquerdo e inferior direito; o segundo ao superior direito e inferior esquerdo. Com três valores, o segundo se aplica tanto ao superior direito quanto ao inferior esquerdo. Um valor se aplica uniformemente a todos os quatro cantos.

Sim — aplique `border-radius` diretamente no elemento `<img>`: `img { border-radius: 50%; width: 100px; height: 100px; }` para um avatar circular. Alternativamente, envolva a imagem em uma `<div>` com `overflow: hidden` e aplique border-radius ao wrapper, o que dá mais controle de layout. Use o recurso de upload de imagem desta ferramenta para visualizar como seu raio fica na sua foto real antes de copiar o CSS. Isso é especialmente útil para recortes de avatar, miniaturas de cards de mídia e layouts de galeria onde a forma exata do recorte afeta o design.

Defina três cantos com um valor grande e deixe um em zero: `border-radius: 50% 50% 50% 0`. Combinado com `transform: rotate(-45deg)`, isso cria o clássico formato de alfinete de mapa. Ajuste qual canto está em zero para apontar a gota em direções diferentes: `0 50% 50% 50%` aponta para a esquerda, `50% 0 50% 50%` aponta para a direita. O canto em zero cria a ponta; os três cantos com raio grande formam o corpo arredondado. Útil para marcadores de localização, ponteiros e acentos decorativos em UI com estilo ilustração.

A barra separa os raios horizontal e vertical de cada canto. A sintaxe é: `border-radius: [raios horizontais] / [raios verticais]`. Por exemplo, `border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%` cria uma forma parecida com um ovo onde cada canto tem uma curva elíptica assimétrica. O gerador de Blob Aleatório nesta ferramenta usa essa sintaxe para produzir formas orgânicas e assimétricas — populares para fundos de seções hero, blobs decorativos e elementos de design no estilo ilustração. Cada canto pode ter uma proporção diferente entre raio horizontal e vertical.

A ferramenta de border-radius do cssmatic.com é funcional, mas desatualizada — falta upload de imagem, geração de blob e uma biblioteca de predefinições. O almanaque do css-tricks.com é uma documentação excelente, mas não é um gerador interativo. O clip-path maker do bennettfeely.com tem sobreposição de caso de uso, mas foca em clip-path em vez de border-radius. O gerador da UtiloKit oferece: prévia ao vivo com upload de imagem (processado inteiramente no cliente), predefinições de forma (círculo, pílula, card, ovo, blob), geração aleatória de blob usando a sintaxe de barra com 8 valores, alternância de unidade px/% e três formatos de cópia. Sem anúncios, sem marcas d'água, sem cadastro e nada enviado a um servidor.

Não — a imagem é carregada exclusivamente usando a File API do navegador e nunca sai do seu dispositivo. O elemento de prévia renderiza a imagem localmente usando uma chamada `createObjectURL()` que permanece inteiramente na memória do navegador. Sem upload, sem processamento no servidor, sem armazenamento em nuvem. A mesma arquitetura do lado do cliente se aplica a todos os outros recursos: entradas de slider, geração de CSS, randomização de blob e cópia para a área de transferência funcionam em JavaScript sem nenhuma requisição de rede após o carregamento inicial da página. Suas imagens e trabalho de design permanecem completamente privados.

`border-radius` é totalmente animável via transições CSS e animações de keyframe. Use `transition: border-radius 0.3s ease` para interpolar suavemente entre dois valores no hover. Use `@keyframes` para morfar continuamente entre formas — animar de `0` para `50%` faz um quadrado pulsar em um círculo. Morfar entre duas formas de blob (diferentes valores de barra com 8 valores) cria animações fluidas e orgânicas populares em fundos de hero. Note que animar border-radius aciona um repaint em cada frame, então use `will-change: border-radius` em elementos que animam frequentemente.

`border-radius` é puramente visual — ele recorta a aparência pintada do elemento, mas não altera sua caixa de layout, área de margem ou área de toque de eventos de ponteiro. Os cantos quadrados invisíveis ainda são clicáveis e ainda ocupam seu espaço de layout. Isso é importante para interfaces de toque: um botão circular ainda tem uma região clicável quadrada em seus cantos. Se você precisar que a área de toque siga precisamente a forma arredondada, use `clip-path: circle()`, que também recorta eventos de ponteiro. `box-shadow` segue `border-radius` corretamente; `outline` não funciona na maioria dos navegadores — use `box-shadow: 0 0 0 3px cor` como alternativa de anel de foco arredondado.

Sim — a ferramenta é totalmente responsiva e funciona em qualquer navegador móvel moderno. No iPhone, use-a no Safari ou Chrome sem instalar nada. No Android, Chrome, Firefox e Edge funcionam todos. Os sliders são amigáveis ao toque com alças de arrastar do tamanho adequado. O upload de imagem usa o seletor de arquivos nativo do celular, permitindo selecionar da sua galeria de fotos ou do aplicativo de arquivos. Copiar o CSS para a área de transferência funciona via a Web Clipboard API padrão suportada em todos os navegadores móveis modernos. A ferramenta inteira roda no cliente, então não há download de aplicativo, sem conta e sem dados enviados para lugar nenhum.