So fügen Sie Bildern online abgerundete Ecken hinzu

Aktualisiert am 21. März 2026

6 Min. gelesen

Abgerundete Ecken verleihen Bildern ein modernes, elegantes Aussehen. Von App-Symbolen und Produkt-Miniaturansichten bis hin zu Präsentations-Screenshots und E-Mail-Newslettern wirken Bilder mit abgerundeten Ecken ansprechender und professioneller als scharfe rechteckige Kanten.

Warum runde Bildecken?

CSS border-radius kann Bilder auf Websites runden, funktioniert aber nur in Browsern – die zugrunde liegende Bilddatei weist immer noch scharfe Ecken auf. Wenn Sie dieses Bild in einer E-Mail, einer Präsentation oder einem Social-Media-Beitrag teilen, werden die Ecken wieder zu scharfen Rechtecken. Durch die direkte Anwendung abgerundeter Ecken auf die Bildpixel bleibt der Effekt überall bestehen.

Auch abgerundete Ecken sind für App-Icons unerlässlich. iOS verwendet eine bestimmte abgerundete Rechteckform (Superellipse) und Android verwendet verschiedene abgerundete Formen. Mit unserem Tool können Sie genau den Radius einstellen, den Sie benötigen.

So runden Sie Bildecken in 3 Schritten ab

Schritt 1: Laden Sie Ihr Bild hoch. Öffnen Sie die Runde Bildecken Tool und ziehen Sie Ihr Foto per Drag-and-Drop oder klicken Sie zum Durchsuchen. PNG-, JPG- und WebP-Dateien werden alle unterstützt.

Schritt 2: Passen Sie den Eckenradius an. Mit dem Schieberegler können Sie den Radius von 0 % (spitz) bis 50 % (vollständig abgerundet) einstellen. Oder verwenden Sie die voreingestellten Tasten: Dezent (10 %), Mittel (20 %), Rund (35 %) oder Voll (50 %). Die Vorschau wird in Echtzeit aktualisiert.

Schritt 3: Herunterladen. Wählen Sie PNG für transparente Ecken (ideal zum Überlagern auf jedem Hintergrund) oder JPG/WebP mit weißer Füllung. Klicken Sie auf „Herunterladen“ und Ihr Bild mit den abgerundeten Ecken ist fertig.

Eckradius verstehen

Der Eckenradius wird als Prozentsatz der kürzeren Seite des Bildes ausgedrückt. So sieht jede Voreinstellung in der Praxis aus:

Dezent (10 %): Eine sanfte Kurve, die scharfe Kanten abmildert, ohne die Bildform dramatisch zu verändern. Ideal für Produktbilder und Screenshots.

Mittel (20 %): Die Standardeinstellung – eine spürbare, aber ausgewogene Rundung, die für die meisten Anwendungsfälle gut funktioniert, einschließlich Karten, Miniaturansichten und Präsentationen.

Runde (35%): Eine markante Kurve, die dem Aussehen eines Kreises ähnelt. Ideal für App-Icon-Annäherungen und Designelemente.

Voll (50 %): Maximale Rundung – verwandelt ein quadratisches Bild in einen Kreis. Erstellt bei rechteckigen Bildern eine Stadionform (Pillenform) auf den kürzeren Seiten.

Häufige Anwendungsfälle

App-Symbole: iOS- und Android-App-Symbole verwenden abgerundete Rechtecke. Verwenden Sie die Voreinstellung „Rund“ oder „Voll“, um den Plattformrichtlinien zu entsprechen.

Produktbilder: E-Commerce-Produktkarten sehen mit dezent abgerundeten Ecken moderner aus.

Präsentationen: Screenshots und Fotos mit abgerundeten Ecken sehen in Diadecks und Berichten eleganter aus.

E-Mail-Newsletter: Da der CSS-Rahmenradius von allen E-Mail-Clients inkonsistent unterstützt wird, gewährleistet das Einbetten abgerundeter Ecken in das Bild eine konsistente Darstellung.

Abgerundete Ecken vs. CSS-Randradius

CSS border-radius eignet sich hervorragend für Webseiten, bei denen Sie die Rendering-Umgebung steuern. Dieses Tool eignet sich jedoch besser, wenn Sie den abgerundeten Effekt in die Bilddatei selbst integrieren möchten – zum Teilen, Drucken oder zur Verwendung in Kontexten, die CSS nicht unterstützen.

Datenschutz und Sicherheit

Wie alle iFormat-Tools verarbeitet das Tool für abgerundete Ecken alles in Ihrem Browser. Ihre Bilder verlassen nie Ihr Gerät – kein Server-Upload, keine Speicherung, keine Datenschutzbedenken.

Auswahl des richtigen Dateiformats

Welches Format Sie nach dem Abrunden der Ecken wählen, hängt davon ab, wo das Bild verwendet wird. PNG behält die Transparenz in den Ecken bei – die abgerundeten Bereiche werden transparent und nicht mit einer Farbe gefüllt. Dies ist ideal zum Platzieren von Bildern auf farbigen oder strukturierten Hintergründen auf Websites, Präsentationen und E-Mail-Vorlagen. Der Nachteil sind größere Dateigrößen im Vergleich zu JPG.

JPG füllt die abgerundeten Ecken mit einer Volltonfarbe (normalerweise Weiß). Dies ist in Ordnung, wenn das Bild auf einem weißen Hintergrund angezeigt wird oder wenn die Dateigröße wichtiger ist als die Flexibilität. WebP bietet das Beste aus beiden Welten – Transparenzunterstützung mit deutlich kleineren Dateigrößen als PNG – aber noch nicht jede Plattform akzeptiert WebP-Uploads. Für Social-Media- und Messaging-Apps ist JPG die sicherste Wahl. Verwenden Sie für von Ihnen kontrollierte Websites WebP mit einem PNG-Fallback.

Stapelverarbeitung mehrerer Bilder

Beim Erstellen einer Teamseite, eines Portfolios oder eines Produktrasters, bei dem jedes Bild den gleichen Eckenradius benötigt, ist Konsistenz von entscheidender Bedeutung. Verarbeiten Sie alle Bilder mit derselben Radiuseinstellung und denselben Ausgabeabmessungen. Wenn Ihr Team aus acht Mitgliedern besteht, laden Sie jedes Foto hoch und runden Sie es mit dem gleichen Prozentsatz ab, damit es bei der Anzeige nebeneinander einheitlich aussieht. Selbst ein kleiner Unterschied im Eckenradius macht sich bemerkbar, wenn Bilder in einem Rasterlayout platziert werden.

So fügen Sie abgerundete Ecken auf dem iPhone oder Android hinzu

Das iFormat-Tool für abgerundete Ecken funktioniert in jedem mobilen Browser – keine App erforderlich. Öffnen Sie auf dem iPhone Safari und gehen Sie zu iformat.io/round-corners. Tippen Sie auf Wählen Sie Datei, wählen Sie ein Foto aus Ihrer Kamerarolle aus, stellen Sie den Radius mit dem Schieberegler ein und tippen Sie auf Herunterladen. Das PNG wird in Ihrem Download-Ordner in der Dateien-App gespeichert.

Unter Android ist der Vorgang mit Chrome identisch. Die heruntergeladene Datei wird im Album „Downloads“ Ihrer Galerie angezeigt.

PNG vs. JPG für Bilder mit abgerundeten Ecken

Die wichtigste Formatentscheidung ist, ob Sie transparente Ecken benötigen. PNG sorgt für transparente Ecken – die abgerundeten Bereiche werden durchsichtig, sodass das Bild sauber auf jeder Hintergrundfarbe in einer Präsentation, E-Mail oder Website sitzt.

JPG Füllt den Eckbereich mit Weiß, da JPG keine Transparenz unterstützt. Dies ist in Ordnung, wenn das Bild immer auf einem weißen Hintergrund erscheint. JPG erzeugt eine kleinere Dateigröße, aber PNG ist fast immer die bessere Wahl für Bilder mit abgerundeten Ecken, da Sie selten jeden Hintergrund kennen, den Sie verwenden werden.

Häufig gestellte Fragen

Kann ich einem JPG-Bild abgerundete Ecken hinzufügen?

Ja. Laden Sie Ihr JPG hoch, wenden Sie den Eckenradius an und laden Sie es als PNG für transparente Ecken oder JPG für weiß gefüllte Ecken herunter. Das Eingabeformat schränkt die Ausgabe nicht ein.

Reduziert das Hinzufügen abgerundeter Ecken die Bildqualität?

Nein. Das Werkzeug wendet die Eckenmaske an, ohne das Bild erneut zu komprimieren. Die Qualität ändert sich nur, wenn Sie als JPG herunterladen – beim Herunterladen als PNG bleibt die volle Qualität erhalten.

Welcher Eckenradius passt zu iOS-App-Symbolen?

Apple verwendet für iOS-App-Symbole die Form einer Superellipse (Kreis). Ein Radius von etwa 22–23 % entspricht in etwa dem iOS-Look für Standardgrößen. Verwenden Sie die benutzerdefinierte Radiuseingabe für eine präzise Steuerung.

Kann ich abgerundete Ecken mit farbigem Hintergrund anstelle von transparentem Hintergrund erhalten?

Laden Sie das PNG mit Transparenz herunter und platzieren Sie es in einem beliebigen Designtool auf der von Ihnen gewählten Hintergrundfarbe – Canva, Google Slides, Figma oder PowerPoint unterstützen dies.

Funktioniert das bei animierten GIFs?

Das Tool verarbeitet nur statische Bilder (JPG, PNG, WebP). Für animierte GIFs mit abgerundeten Ecken ist ein Desktop-Tool wie GIMP erforderlich.

Runde Bildecken kostenlos

Kein Upload erforderlich – Prozesse erfolgen vollständig in Ihrem Browser.

Probieren Sie es jetzt aus