Angoli Arrotondati Immagine

Clicca per caricare un'immagine

JPG / PNG / WEBP

Preset curvatura

Raggio curvatura

20%
050%

Formato output

Carica un'immagine per mostrare l'anteprima

Aggiungi angoli arrotondati alle tue immagini online, anteprima in tempo reale con cursore, 3 preset piccolo/medio/grande, esporta PNG trasparente adatto a qualsiasi sfondo.

Raccomandazioni correlate

Generatore ICO

Ritaglia Immagine

Ridimensiona immagini

Comprimi immagini

Converti Immagine

Cos'è l'arrotondamento degli angoli delle immagini?

L'arrotondamento degli angoli è la tecnica che sostituisce i 4 angoli retti di un'immagine con archi morbidi. Questo strumento disegna tracciati di rettangolo arrotondato tramite arcTo() di Canvas, poi usa clip() per ritagliare l'immagine: le aree non riempite diventano pixel trasparenti Alpha=0 all'esportazione PNG.

**Che effetto visivo hanno gli angoli arrotondati?** Sono più morbidi e accoglienti degli angoli retti, riducono l'aggressività visiva, ampiamente usati nel design UI per icone App, pulsanti, schede, avatar. La "Superellisse (squircle)" di iOS porta gli angoli all'estremo della curva morbida.

**Perché molte icone App richiedono angoli arrotondati?** iOS/iPadOS/macOS Big Sur applicano automaticamente maschere di arrotondamento, ma uno sfondo bianco causa difetti di "bordo bianco". La pratica corretta è generare prima un PNG con angoli arrotondati all'origine; questo strumento serve a questo.

**Pixel vs percentuali:** I pixel sono precisi ma difficili da allineare tra immagini; le percentuali sono adattive e consistenti su diverse dimensioni. I sistemi di design usano percentuali, come 22.37% per iOS e 25% per Android.

**Differenza con CSS border-radius:** CSS border-radius agisce sul livello visuale, l'immagine esportata mantiene angoli retti; questo strumento genera veri PNG con canale Alpha per qualsiasi scenario senza CSS (PPT, video, stampa).

Casi d'uso

  • Creare avatar per social network (WhatsApp, LINE, Twitter/X, Instagram, Facebook), genera avatar rotondi con un clic
  • Aggiungere rapidamente angoli arrotondati alle icone App (iOS consiglia 22-25%, Android Adaptive Icon 25%)
  • Le immagini di prodotti e-commerce con angoli arrotondati sono più morbide e attraenti, migliorano clic e conversioni
  • Elaborazione locale di materiale con angoli arrotondati per presentazioni PPT, montaggio video e stampa
  • Creazione in batch di icone e materiale con stesso raggio per sistemi di design (elaborare una per una)

Come utilizzare

  1. Clicca sull'area di caricamento per selezionare un'immagine, o trascina direttamente JPG/PNG/WEBP nell'area
  2. Scegli preset piccolo (10%), medio (25%), grande (50%) con un clic, o trascina il cursore per personalizzare (clicca per cambiare unità)
  3. Scegli formato di output: PNG (sfondo trasparente)/WEBP (dimensione ridotta)/JPG (sfondo bianco)
  4. Anteprima in tempo reale a destra, clicca su download quando soddisfatto, il file viene salvato automaticamente con suffisso -rounded

Funzionalità

  • Doppia unità: il raggio supporta pixel (0-500px) e percentuali (0-50%) con cambio libero, flessibile per diversi scenari
  • 3 preset: piccolo (10%), medio (25%), grande (50%) con un clic, anche regolazione personalizzata con cursore
  • Tre formati di output: PNG (con canale alpha), WEBP (dimensione ridotta), JPG (sfondo bianco senza trasparenza)
  • Anteprima in tempo reale: regola il cursore per vedere l'effetto istantaneamente, sfondo a scacchiera mostra aree trasparenti
  • Trascinamento: clicca per selezionare o trascina direttamente le immagini nell'area di caricamento, supporta JPG/PNG/WEBP
  • Elaborazione locale: tutto avviene nel Canvas del browser, le immagini non vengono inviate al server

Best Practices

Scegli PNG di default per trasparenza, non JPG

JPG non supporta il canale Alpha, riempimento bianco forzato causa quadrati bianchi agli angoli. Usa JPG solo senza trasparenza, scegli PNG di default.

Scegli WEBP per dimensione ridotta con trasparenza

WEBP supporta anche la trasparenza ma è 25-35% più piccolo di PNG, ideale per materiale web. Attenzione: alcuni vecchi software di design non riconoscono WEBP, preferisci PNG per interoperabilità.

Proporzione angoli per icone App

iOS aggiunge automaticamente ~22.37% di arrotondamento alle icone, ma uno sfondo bianco originale causa difetti di "bordo bianco". Genera prima un PNG con angoli arrotondati (22-25% consigliato). Android Adaptive Icon consiglia 25% come area sicura.

Usa raggio 50% per avatar circolari

La maggior parte delle piattaforme social come WhatsApp, LINE, Twitter, Instagram usano avatar rotondi. Il preset 50% genera un PNG rotondo con un clic, sfondo trasparente adatto a temi chiari/scuri.

Linee guida icone iOS App

Non applicare CSS border-radius a immagini già arrotondate

Se hai già esportato un PNG con angoli arrotondati, non avvolgerlo con CSS border-radius + overflow:hidden, causerà doppia elaborazione e bordi sfocati. Mostra direttamente con tag img.

Per angoli più complessi (angoli diversi, solo superiori)

Questo strumento supporta solo angoli standard uguali sui quattro lati. Per scenari complessi come angoli superiori TabBar, angoli inferiori o singoli angoli, usa l'[editor di immagini](/image/image-editor/) o strumenti pro come Figma.

Domande frequenti

Come aggiungere angoli arrotondati a un'immagine?

Carica l'immagine e clicca sui preset piccolo/medio/grande per scegliere rapidamente, o trascina il cursore per personalizzare pixel (0-500px) o percentuali (0-50%). Anteprima in tempo reale a destra, scarica quando soddisfatto, il formato PNG mantiene automaticamente la trasparenza.

Pixel o percentuali per il raggio?

I pixel sono ideali per il controllo preciso in scenari a dimensione fissa. Le percentuali calcolano l'arrotondamento in proporzione al lato corto, più flessibili per diverse dimensioni. Cambia unità cliccando; 50% produce un cerchio perfetto, ideale per avatar.

Di che colore saranno gli angoli arrotondati?

Scegliendo formato PNG o WEBP, gli angoli sono pixel completamente trasparenti (Alpha=0), fusione naturale su qualsiasi sfondo. In JPG lo sfondo è automaticamente bianco (avviso giallo visualizzato), per immagini finali senza trasparenza.

Quali formati di immagine sono supportati?

Input JPG, PNG, WEBP; output PNG (trasparente), WEBP (dimensione ridotta), JPG (sfondo bianco). Il nome del file di output aggiunge automaticamente il suffisso -rounded per distinguere dall'originale.

C'è un limite alla dimensione dell'angolo?

Modalità percentuale 0-50% (50% = cerchio perfetto), modalità pixel 0-500px. Valore maggiore = angoli più arrotondati; a metà del lato corto diventa cerchio. Strumento basato su Canvas arcTo + clip per angoli standard (non Squircle/superellisse).

Si possono creare avatar o icone App?

Perfettamente. Per avatar circolari scegli preset 50%; per icone iOS App 22-25% consigliato (usa 25%), per Android Adaptive Icon 25% come area sicura. Il PNG trasparente si adatta a qualsiasi tema.

L'arrotondamento rende l'immagine sfocata?

No. Il ritaglio avviene sulla risoluzione originale tramite Canvas senza ricampionamento o compressione, qualità identica all'originale. Gli angoli sono veri pixel trasparenti, non transizioni sfocate, bordi nitidi.

Le immagini vengono divulgate durante l'elaborazione?

No. Tutta l'elaborazione avviene localmente nel browser tramite Canvas API, le immagini non transitano su alcun server dal caricamento al download. Anche immagini sensibili come foto di documenti sono sicure.

Perché l'effetto angoli arrotondati non si vede?

Verifica: ① il raggio è maggiore di 0 (cursore non all'estremità sinistra)? ② l'immagine è stata caricata correttamente (formati JPG/PNG/WEBP)? ③ il browser supporta HTML5 Canvas (browser moderni sì)? Se persiste, ricarica la pagina.

Che differenza c'è con CSS border-radius?

CSS border-radius agisce sul livello di visualizzazione, l'immagine esportata mantiene angoli retti e funziona solo sul web; questo strumento genera veri file PNG con canale Alpha per PPT, video, stampa e qualsiasi scenario senza CSS.

Glossario

Raggio angolo (Border Radius)
Valore del raggio dell'arco che determina la curvatura. Valore maggiore = angolo più arrotondato, massimo (metà del lato corto) forma un cerchio. Supporta pixel (0-500px) e percentuali (0-50%).
Canale Alpha
Canale di trasparenza integrato in PNG/WEBP, ogni pixel usa 0-255 per l'opacità. Gli angoli hanno Alpha=0 dopo l'arrotondamento, quindi lo sfondo è completamente trasparente, non di un colore.
Squircle (superellisse)
Forma di angolo introdotta in iOS 7+, più morbida del rettangolo arrotondato tradizionale. Formula matematica x⁴+y⁴=r⁴. Questo strumento produce archi standard, usa Figma/Sketch per Squircle.
Adaptive Icon
Icona adattiva introdotta in Android 8.0+, composta da due livelli (primo piano e sfondo). Consigliato 25% di raggio come area sicura, il launcher OEM applica maschera secondo il proprio stile.
Canvas arcTo
Metodo di disegno archi della Canvas 2D API. Questo strumento combina arcTo + clip per creare tracciati di rettangolo arrotondato, ritagliando l'immagine nell'area che diventa pixel trasparenti Alpha=0.

Tabella di riferimento standard angoli per piattaforma

Piattaforma / ElementoDimensione baseProporzione consigliataApprossimativo (px)
Icona iOS / iPadOS App1024 × 1024Circa 22.37%≈ 229 px
Android Adaptive Icon108 × 108Circa 25%≈ 27 px
Icona macOS Sonoma App1024 × 1024Squircle superellisseNessun px fisso
Schede Windows 11—Circa 8 px8 px
Material Design 3 Large—Circa 28 px28 px
Avatar WhatsApp / LINE640 × 64050% (cerchio completo)320 px
Avatar Twitter / Instagram400 × 40050% (cerchio completo)200 px
Immagine prodotto e-commerce800 × 800Consigliato 16~24 px16-24 px

Authoritative References