Cantos Arredondados

Clique para enviar uma imagem

JPG / PNG / WEBP

Raio padrão

Tamanho do raio

20%
050%

Formato de saída

Envie uma imagem para mostrar a pré-visualização

Adicione cantos arredondados às suas imagens online, visualização em tempo real com controle deslizante, 3 predefinições pequeno/médio/grande, exporta PNG transparente para qualquer fundo.

Sugestões Relacionadas

Gerador ICO

Cortar Imagem

Redimensionar Imagem

Comprimir imagens

Converter Imagem

O que é arredondamento de cantos de imagens?

Arredondamento de cantos é a técnica de substituir os 4 cantos retos de uma imagem por arcos suaves. Esta ferramenta desenha caminhos de retângulo arredondado via arcTo() do Canvas, depois usa clip() para recortar a imagem: áreas não preenchidas se tornam pixels transparentes Alpha=0 ao exportar PNG.

**Que efeito visual os cantos arredondados têm?** São mais suaves e acolhedores que cantos retos, reduzem a agressividade visual, amplamente usados em design UI para ícones de App, botões, cartões, avatares. A "Superelipse (squircle)" do iOS leva os cantos ao extremo da curva suave.

**Por que muitos ícones de App exigem cantos arredondados?** iOS/iPadOS/macOS Big Sur aplicam máscaras de arredondamento automaticamente, mas um fundo branco causa defeitos de "borda branca". A prática correta é gerar primeiro um PNG com cantos arredondados na origem; esta ferramenta serve para isso.

**Pixels vs porcentagens:** Pixels são precisos mas difíceis de alinhar entre imagens; porcentagens são adaptativas e consistentes em diferentes tamanhos. Sistemas de design usam porcentagens, como 22.37% para iOS e 25% para Android.

**Diferença com CSS border-radius:** CSS border-radius atua na camada visual, a imagem exportada mantém cantos retos; esta ferramenta gera PNGs reais com canal Alpha para qualquer cenário sem CSS (PPT, vídeo, impressão).

Casos de uso

  • Criar avatares para redes sociais (WhatsApp, LINE, Twitter/X, Instagram, Facebook), gera avatares redondos com um clique
  • Adicionar cantos arredondados rapidamente a ícones de App (iOS recomenda 22-25%, Android Adaptive Icon 25%)
  • Imagens de produtos de e-commerce com cantos arredondados são mais suaves e atraentes, melhoram cliques e conversões
  • Processamento local de material com cantos arredondados para apresentações PPT, edição de vídeo e impressão
  • Criação em lote de ícones e material com mesmo raio para sistemas de design (processar uma por uma)

Como Usar

  1. Clique na área de upload para selecionar uma imagem, ou arraste diretamente JPG/PNG/WEBP para a área
  2. Escolha predefinições pequeno (10%), médio (25%), grande (50%) com um clique, ou arraste o controle para personalizar (clique para trocar unidade)
  3. Escolha formato de saída: PNG (fundo transparente)/WEBP (menor tamanho)/JPG (fundo branco)
  4. Visualização em tempo real à direita, clique em baixar quando satisfeito, arquivo salvo automaticamente com sufixo -rounded

Recursos

  • Unidade dupla: raio suporta pixels (0-500px) e porcentagens (0-50%) com troca livre, flexível para diferentes cenários
  • 3 predefinições: pequeno (10%), médio (25%), grande (50%) com um clique, também ajuste personalizado com controle
  • Três formatos de saída: PNG (com canal alpha), WEBP (tamanho reduzido), JPG (fundo branco sem transparência)
  • Visualização em tempo real: ajuste o controle para ver o efeito instantaneamente, fundo de xadrez mostra áreas transparentes
  • Arrastar e soltar: clique para selecionar ou arraste imagens diretamente para a área de upload, suporta JPG/PNG/WEBP
  • Processamento local: tudo é feito no Canvas do navegador, as imagens não são enviadas ao servidor

Best Practices

Escolha PNG por padrão para transparência, não JPG

JPG não suporta canal Alpha, preenchimento branco forçado causa quadrados brancos nos cantos. Use JPG apenas sem transparência, escolha PNG por padrão.

Escolha WEBP para tamanho reduzido com transparência

WEBP também suporta transparência mas é 25-35% menor que PNG, ideal para material web. Atenção: alguns softwares de design antigos podem não reconhecer WEBP, prefira PNG para colaboração.

Proporção de cantos para ícones de App

iOS adiciona automaticamente ~22.37% de arredondamento aos ícones, mas um fundo branco original causa defeitos de "borda branca". Gere primeiro um PNG com cantos arredondados (22-25% recomendado). Android Adaptive Icon recomenda 25% como área segura.

Use raio 50% para avatares circulares

A maioria das plataformas sociais como WhatsApp, LINE, Twitter, Instagram usam avatares redondos. A predefinição 50% gera um PNG redondo com um clique, fundo transparente adequado para temas claros/escuros.

Diretrizes de ícones iOS App

Não aplique CSS border-radius em imagens já arredondadas

Se você já exportou um PNG com cantos arredondados, não o envolva com CSS border-radius + overflow:hidden, causará processamento duplo e bordas borradas. Exiba diretamente com tag img.

Para cantos mais complexos (cantos diferentes, apenas superiores)

Esta ferramenta suporta apenas cantos padrão iguais nos quatro lados. Para cenários complexos como cantos superiores de TabBar, cantos inferiores ou cantos individuais, use o [editor de imagens](/image/image-editor/) ou ferramentas profissionais como Figma.

Perguntas frequentes

Como adicionar cantos arredondados a uma imagem?

Envie a imagem e clique nas predefinições pequeno/médio/grande para escolher rapidamente, ou arraste o controle para personalizar pixels (0-500px) ou porcentagens (0-50%). Visualização em tempo real à direita, baixe quando satisfeito, o formato PNG preserva transparência automaticamente.

Usar pixels ou porcentagens para o raio?

Pixels são ideais para controle preciso em tamanhos fixos. Porcentagens calculam o arredondamento pela proporção do lado menor, mais flexível para diferentes tamanhos. Troque a unidade clicando; 50% produz um círculo perfeito, ideal para avatares.

De que cor ficarão os cantos arredondados?

Ao escolher formato PNG ou WEBP, os cantos são pixels completamente transparentes (Alpha=0), fusão natural em qualquer fundo. Em JPG o fundo é automaticamente branco (aviso amarelo exibido), para imagens finais sem transparência.

Quais formatos de imagem são suportados?

Entrada JPG, PNG, WEBP; saída PNG (transparente), WEBP (menor tamanho), JPG (fundo branco). O nome do arquivo de saída adiciona automaticamente o sufixo -rounded para distinguir do original.

Há limite para o tamanho do canto?

Modo porcentagem 0-50% (50% = círculo perfeito), modo pixel 0-500px. Valor maior = cantos mais arredondados; na metade do lado menor vira círculo. Ferramenta baseada em Canvas arcTo + clip para cantos padrão (não Squircle/superelipse).

Posso criar avatares ou ícones de App?

Perfeitamente. Para avatares circulares escolha predefinição 50%; para ícones iOS App recomenda-se 22-25% (use 25%), para Android Adaptive Icon recomenda-se 25% como área segura. O PNG transparente se adapta a qualquer tema.

O arredondamento deixa a imagem borrada?

Não. O recorte é feito na resolução original via Canvas sem reamostragem ou compressão, qualidade idêntica ao original. Os cantos são pixels transparentes reais, sem transições borradas, bordas nítidas.

As imagens são vazadas durante o processamento?

Não. Todo processamento é feito localmente no navegador via Canvas API, as imagens não passam por nenhum servidor do upload ao download. Mesmo imagens sensíveis como fotos de documentos são seguras.

Por que o efeito de cantos arredondados não aparece?

Verifique: ① o raio é maior que 0 (controle não na extremidade esquerda)? ② a imagem carregou corretamente (formatos JPG/PNG/WEBP)? ③ o navegador suporta HTML5 Canvas (navegadores modernos sim)? Se persistir, recarregue a página.

Qual a diferença com CSS border-radius?

CSS border-radius atua na camada de exibição, a imagem exportada mantém cantos retos e funciona apenas na web; esta ferramenta gera arquivos PNG reais com canal Alpha para PPT, vídeos, impressão e qualquer cenário sem CSS.

Glossário

Raio de canto (Border Radius)
Valor do raio do arco que determina a curvatura. Valor maior = canto mais arredondado, máximo (metade do lado menor) forma um círculo. Suporta pixels (0-500px) e porcentagens (0-50%).
Canal Alpha
Canal de transparência integrado em PNG/WEBP, cada pixel usa 0-255 para opacidade. Os cantos têm Alpha=0 após arredondamento, então o fundo é completamente transparente, não de uma cor.
Squircle (superelipse)
Forma de canto introduzida no iOS 7+, mais suave que o retângulo arredondado tradicional. Fórmula matemática x⁴+y⁴=r⁴. Esta ferramenta produz arcos padrão, use Figma/Sketch para Squircle.
Adaptive Icon
Ícone adaptativo introduzido no Android 8.0+, composto por duas camadas (primeiro plano e fundo). Recomenda-se 25% de raio como área segura, o launcher OEM aplica máscara conforme seu estilo.
Canvas arcTo
Método de desenho de arcos da Canvas 2D API. Esta ferramenta combina arcTo + clip para criar caminhos de retângulo arredondado, recortando a imagem na área que se torna pixels transparentes Alpha=0.

Tabela de referência de padrões de canto por plataforma

Plataforma / ElementoTamanho baseProporção recomendadaAproximado (px)
Ícone iOS / iPadOS App1024 × 1024Aprox. 22.37%≈ 229 px
Android Adaptive Icon108 × 108Aprox. 25%≈ 27 px
Ícone macOS Sonoma App1024 × 1024Squircle superelipseSem px fixo
Cartões Windows 11—Aprox. 8 px8 px
Material Design 3 Large—Aprox. 28 px28 px
Avatar WhatsApp / LINE640 × 64050% (círculo completo)320 px
Avatar Twitter / Instagram400 × 40050% (círculo completo)200 px
Imagem produto e-commerce800 × 800Recomendado 16~24 px16-24 px

Authoritative References