Gerador de border-radius

Transforma um elemento quadrado num 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% encontra-se no meio nos quatro lados, criando uma curva perfeita. Num 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 contentores de ícones em CSS.

Use `border-radius: 9999px` (ou qualquer valor muito grande como 100px) num elemento não quadrado como um botão ou etiqueta. O navegador limita automaticamente o raio a metade da dimensão mais curta do elemento, pelo que as extremidades curtas se tornam semicírculos perfeitos enquanto os lados longos permanecem retos. Isto cria o clássico botão CTA em forma de pill presente na maioria dos sistemas de design modernos. O truque `9999px` funciona independentemente do tamanho do elemento — não é necessário calcular manualmente metade da altura. A predefinição Pill deste gerador aplica este padrão instantaneamente.

Os valores em píxeis são absolutos — um raio de `12px` mantém-se com 12 píxeis independentemente do tamanho do elemento. Se o elemento aumentar ou diminuir, o tamanho do canto mantém-se fixo. Os valores em percentagem são relativos — `50%` curva sempre até ao ponto exacto médio de cada lado, produzindo uma forma proporcional que escala com o elemento. Use percentagem (`50%`) para formas como círculos e pills que devem escalar com o elemento. Use píxeis para componentes de UI como cartões, botões e inputs onde quer um tamanho de canto consistente definido pelo sistema de design, independentemente do conteúdo.

Um `border-radius` padrão apenas curva cantos para fora (convexo). Para um canto invertido ou côncavo — a curva de 'entalhe' ou 'recorte' para dentro usada em bilhetes, separadores e balões de fala — não pode usar `border-radius` sozinho. A técnica mais comum é uma máscara radial-gradient: `mask: radial-gradient(circle 20px at top left, transparent 98%, black) top left / 51% 51% no-repeat ...`, repetida para cada canto que pretende cortar para dentro. Uma alternativa é um pseudo-elemento posicionado (`::before`) com a cor de fundo da página e o seu próprio `border-radius` convexo, sobreposto ao canto para que aparente cortar uma forma côncava. Para bordas recortadas como a linha de rasgamento de um bilhete, uma máscara radial-gradient repetida ao longo de um lado produz a borda festoneada. Portanto, o 'border radius invertido' é na verdade um truque de máscara em vez de um valor border-radius — útil de saber ao pesquisar por um gerador de border radius invertido css.

Use as propriedades de canto individuais: `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 angulosos. Pode combiná-los livremente: `border-top-left-radius: 16px; border-bottom-right-radius: 16px` cria uma forma arredondada na diagonal. Na abreviatura, 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 angulosos.

No sentido dos ponteiros do relógio a partir do canto superior esquerdo: Superior esquerdo → Superior direito → Inferior direito → Inferior esquerdo. Assim, `border-radius: 16px 8px 0 8px` dá ao canto superior esquerdo 16px, superior direito 8px, inferior direito 0 e inferior esquerdo 8px. Isto corresponde à direcção padrão de abreviatura CSS usada por `margin`, `padding` e `border-width`. Com dois valores, o primeiro aplica-se ao superior esquerdo e inferior direito; o segundo ao superior direito e inferior esquerdo. Com três valores, o segundo aplica-se ao superior direito e inferior esquerdo. Um valor aplica-se uniformemente a todos os quatro cantos.

Sim — aplique `border-radius` directamente ao elemento `<img>`: `img { border-radius: 50%; width: 100px; height: 100px; }` para um avatar circular. Em alternativa, envolva a imagem num `<div>` com `overflow: hidden` e aplique border-radius ao contentor, o que lhe dá mais controlo de layout. Use a funcionalidade de upload de imagem desta ferramenta para pré-visualizar o aspecto do seu raio na sua foto real antes de copiar o CSS. Isto é particularmente útil para recortes de avatar, miniaturas de cartões de media e layouts de galeria onde a forma exacta do recorte afecta 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)`, isto cria a clássica forma de marcador de mapa. Ajuste qual canto fica em zero para apontar a gota em diferentes direcções: `0 50% 50% 50%` aponta para a esquerda, `50% 0 50% 50%` aponta para a direita. O canto em zero cria a ponta aguçada; os três cantos com raio grande formam o corpo arredondado. Útil para marcadores de localização, ponteiros e acentos decorativos em UI de 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 semelhante a um ovo onde cada canto tem uma curva elíptica assimétrica. O gerador de Blob Aleatório nesta ferramenta utiliza esta sintaxe para produzir formas orgânicas e assimétricas — populares para fundos de secções hero, blobs decorativos e elementos de design de estilo ilustração. Cada canto pode ter uma proporção horizontal-vertical diferente.

A ferramenta de border-radius do cssmatic.com é funcional mas desactualizada — não tem upload de imagem, geração de blobs nem biblioteca de predefinições. O almanaque css-tricks.com é excelente documentação mas não é um gerador interactivo. O clip-path maker do bennettfeely.com sobrepõe-se em caso de uso mas visa clip-path em vez de border-radius. O gerador do UtiloKit oferece: pré-visualização em tempo real com upload de imagem (processado inteiramente no lado do cliente), predefinições de formas (círculo, pill, cartão, ovo, blob), geração aleatória de blobs com a sintaxe de oito valores com barra, alternância de unidades px/%, e três formatos de cópia. Sem anúncios, sem marcas de água, sem registo e nada enviado para um servidor.

Não — a imagem é carregada exclusivamente usando a File API do navegador e nunca sai do seu dispositivo. O elemento de pré-visualização renderiza a imagem localmente usando uma chamada `createObjectURL()` que fica inteiramente na memória do navegador. Sem upload, sem processamento no servidor, sem armazenamento na nuvem. A mesma arquitectura no lado do cliente aplica-se a todas as outras funcionalidades: inputs de controlo deslizante, geração de CSS, aleatorização de blobs e cópia para a área de transferência funcionam tudo em JavaScript sem qualquer pedido de rede após o carregamento inicial da página. As suas imagens e trabalho de design permanecem completamente privados.

`border-radius` é totalmente animável através de transições CSS e animações por keyframes. Use `transition: border-radius 0.3s ease` para interpolar suavemente entre dois valores ao passar o rato. Use `@keyframes` para transformar continuamente entre formas — animar de `0` para `50%` faz um quadrado pulsar em círculo. Transformar entre duas formas blob (diferentes valores de oito valores com barra) cria animações fluidas e orgânicas populares em fundos de heroes. Note que animar border-radius desencadeia uma repintura em cada frame, por isso use `will-change: border-radius` em elementos que animam com frequência.

`border-radius` é puramente visual — recorta a aparência pintada do elemento mas não altera a sua caixa de layout, área de margem ou área de acerto de eventos de ponteiro. Os cantos invisíveis quadrados ainda são clicáveis e ainda ocupam o seu espaço de layout. Isto é importante saber para interfaces tácteis: um botão circular ainda tem uma região clicável quadrada nos seus cantos. Se precisar que a área de acerto siga com precisão a forma arredondada, use `clip-path: circle()`, que também recorta os eventos de ponteiro. `box-shadow` segue `border-radius` correctamente; `outline` não funciona na maioria dos navegadores — use `box-shadow: 0 0 0 3px cor` como alternativa para 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, o Chrome, Firefox e Edge funcionam todos. Os controlos deslizantes são compatíveis com toque e têm pegas de arrastamento com tamanho adequado. O upload de imagem usa o selector de ficheiros nativo no telemóvel, permitindo seleccionar a partir da galeria de fotos ou da aplicação de ficheiros. Copiar CSS para a área de transferência funciona através da Web Clipboard API padrão suportada em todos os navegadores móveis modernos. A ferramenta inteira funciona no lado do cliente, pelo que não há descarga de aplicação, nem conta, nem dados enviados para lado nenhum.