Gerador de Imagem com Cantos Arredondados

O que torna este arredondador diferente: cada canto pode ter o próprio raio, o raio pode ser expresso em pixels ou como porcentagem do lado menor, e o canto em si pode ser um arco arredondado simples, um squircle suave, um chanfro reto ou um recorte escavado para dentro. A ferramenta também gera a regra CSS border-radius correspondente, para que a mesma forma possa ser reproduzida no código em vez de como arquivo.

Por que arredondar os cantos de uma imagem?

Como adicionar cantos arredondados a uma imagem

1. Carregue sua imagem. Arraste um arquivo para a área de soltar ou escolha Selecionar Imagem. JPG, PNG, WebP, GIF, BMP, AVIF e SVG funcionam, desde que o seu navegador consiga decodificá-los.
2. Defina o raio. Arraste uma das alças de canto redondas na pré-visualização, mova o controle Raio do canto ou digite um número exato e alterne a unidade entre px e %.
3. Escolha um estilo de canto. Arredondado, Squircle, Chanfro ou Escavado. Desative Vincular todos os cantos para dar a cada canto o próprio valor, dispostos na tela exatamente como os cantos que eles controlam.
4. Adicione padding, um fundo ou uma borda, se quiser. O padding aumenta o canvas ao redor da imagem, o fundo o preenche, e o anel de borda segue o contorno arredondado em vez do retângulo antigo.
5. Baixe. Mantenha PNG para cantos transparentes e clique em Baixar Imagem. O painel informa as dimensões exportadas e o tamanho do arquivo, e a caixa de CSS mostra a regra equivalente da folha de estilos.

Raio em pixels ou em porcentagem

Um raio em pixels é absoluto: 32 px são 32 px quer a imagem tenha 400 ou 4000 pixels de largura, então o mesmo valor parece dramático em uma miniatura pequena e quase invisível em uma foto grande. Um raio em porcentagem é medido em relação ao lado menor da imagem, então escala com a foto e parece o mesmo em cada exportação. 50% é o valor útil máximo e produz um círculo em uma imagem quadrada e uma pílula em um retângulo.

Os quatro estilos de canto

• Arredondado — um quarto de círculo, a mesma geometria que um navegador desenha para border-radius. Previsível, e o único estilo que mapeia um para um no CSS.
• Squircle — um canto no estilo superelipse. A curva começa mais adiante em cada borda e flui para o lado reto sem a mudança súbita de curvatura de um círculo, por isso as diretrizes de ícones de app no iOS e no Android usam essa forma.
• Chanfro — o canto é cortado por uma diagonal reta. Mais nítido e técnico do que uma curva, e permanece nítido em tamanhos pequenos.
• Escavado — o arco curva para dentro, removendo uma mordida côncava. Dois cantos escavados em lados opostos são lidos imediatamente como um ingresso ou uma etiqueta.

Escolhendo o formato de saída

Como o JPG não tem canal alfa, exportar um preenche os cantos recortados com a cor de fundo escolhida em vez de deixá-los vazios. Isso muitas vezes é exatamente o que você quer — uma foto arredondada branca em uma página branca — mas não é transparência, e não pode ser desfeito depois.

Recursos principais

• Privado por projeto: o arquivo é lido com a API FileReader do navegador e desenhado em um canvas localmente. Ele nunca é enviado.
• Edição arrastando o canto: puxe uma alça na diagonal na pré-visualização e veja o raio seguir o dedo ou o cursor.
• Controle por canto: arredonde só os dois cantos de cima, ou escave um lado e deixe o resto quadrado.
• Fundos de pré-visualização: alterne entre um xadrez de transparência, branco, escuro e um degradê de cor para conferir a borda alfa antes de baixar.
• Padding, preenchimento de fundo e um anel de borda que seguem o mesmo contorno arredondado.
• Escala de saída: exporte na resolução original ou reduza para 75%, 50% ou 25% na mesma passagem.
• CSS copiável: a regra border-radius gerada reproduz a mesma forma em uma folha de estilos quando um arquivo não é a resposta certa.
• Bordas com anti-aliasing: o canto é desenhado como um caminho de recorte, então a curva permanece suave em vez de mostrar uma borda serrilhada em degraus.

Arquivo de imagem ou CSS?

Se a imagem arredondada vai para um conjunto de slides, um PDF, uma assinatura de e-mail, um anúncio de marketplace ou qualquer ferramenta que não vai executar a sua folha de estilos, você precisa de um arquivo de verdade com transparência de verdade — exporte um PNG. Se ela vai para uma página web que você controla, uma regra CSS é mais leve, permanece nítida em qualquer tamanho e é mais fácil de mudar depois; copie o trecho. Os dois não se excluem: muitas equipes enviam o PNG para uso externo e o CSS para o site.

Solução de problemas

• O canto parece serrilhado: a origem provavelmente já é pequena. Arredonde na maior resolução disponível e depois reduza, em vez de arredondar uma imagem que foi ampliada.
• Um halo claro e fino aparece em um fundo escuro: a imagem tinha um fosco branco embutido. Adicione um ou dois pixels de padding em uma cor correspondente, ou aumente um pouco o raio para que o halo seja cortado.
• O download abre como um quadrado branco: o formato é JPG ou o fundo não está definido como Transparente. Mude o formato de saída para PNG.
• Uma foto muito grande parece lenta: o canvas redesenha a imagem em resolução total a cada movimento do controle. Solte o controle e dê um momento ao navegador, ou reduza a escala de saída.
• Um GIF animado perde a animação: o canvas exporta um único quadro. Somente o primeiro quadro é arredondado e salvo.

Perguntas frequentes

Minha imagem é enviada para um servidor?

Não. O arquivo é lido pelo seu navegador com a API FileReader e desenhado em um canvas HTML no seu próprio dispositivo. Nada é enviado ao miniwebtool, então capturas de tela privadas, artes de clientes e fotos pessoais nunca saem do seu computador. A própria página ainda precisa de uma conexão com a internet para carregar.

Por que meus cantos arredondados ficam brancos ou pretos em vez de transparentes?

Somente PNG e WebP podem armazenar transparência. Se você exportar JPG, o formato não tem canal alfa, então os cantos recortados são preenchidos com a cor de fundo. Escolha PNG na lista Formato de saída e defina o fundo como Transparente. Se os cantos ainda parecerem errados, verifique se o app ou o site em que você cola o arquivo suporta alfa, porque alguns editores achatam a transparência do PNG sobre branco.

Como faço uma imagem perfeitamente circular?

Mude a unidade do raio para porcentagem e defina o raio em 50%. Em uma imagem quadrada isso produz um círculo perfeito. Em um retângulo produz uma forma de pílula ou estádio, porque um raio em porcentagem é medido em relação ao lado menor. Use a predefinição Círculo para recortar em um quadrado e arredondar com um clique.

Qual é a diferença entre cantos arredondado, squircle, chanfro e escavado?

Arredondado é um quarto de círculo simples, a mesma forma que o border-radius do CSS desenha. Squircle espalha a curva mais ao longo de cada borda para que a junção fique suave e contínua, que é o visual usado pelos ícones de apps do iOS e do Android. Chanfro corta o canto com uma linha diagonal reta. Escavado curva para dentro em vez de para fora e cava uma mordida côncava em cada canto, o que combina com ingressos, cupons e crachás.

O raio em pixels corresponde ao border-radius CSS do meu site?

O raio é aplicado nos pixels da própria imagem, então corresponde ao CSS somente quando a imagem é exibida no tamanho natural. Uma exportação de 1200 pixels de largura mostrada em uma coluna de 600 pixels é reduzida pela metade, então um raio de 48 pixels parece 24 pixels na tela. Use a unidade de porcentagem para um resultado independente do tamanho, ou copie o trecho CSS que a ferramenta gera, que já informa o equivalente redimensionado.

Posso manter a qualidade da imagem e a resolução original?

Sim. A exportação mantém as dimensões originais em pixels, a menos que você altere a escala de saída ou adicione padding, e o PNG é sem perdas, então nada é recomprimido. Somente os pixels dos cantos mudam, de opacos para transparentes. WebP e JPG são com perdas, então use-os quando o tamanho do arquivo importa mais do que uma cópia exata dos pixels de origem.