Bildgenerator für abgerundete Ecken

Was diesen Abrunder unterscheidet: jede Ecke kann einen eigenen Radius haben, der Radius lässt sich in Pixeln oder als Prozentsatz der kürzeren Seite angeben, und die Ecke selbst kann ein einfacher abgerundeter Bogen, ein glatter Squircle, eine gerade Fase oder eine nach innen gerichtete konkave Form sein. Das Tool gibt außerdem die passende CSS-Regel border-radius aus, sodass dieselbe Form im Code statt als Datei nachgebildet werden kann.

Warum die Ecken eines Bildes abrunden?

So fügen Sie einem Bild abgerundete Ecken hinzu

1. Bild laden. Ziehen Sie eine Datei auf den Ablagebereich oder wählen Sie Bild auswählen. JPG, PNG, WebP, GIF, BMP, AVIF und SVG funktionieren, sofern Ihr Browser sie dekodieren kann.
2. Radius festlegen. Ziehen Sie einen der runden Eckanfasser in der Vorschau, bewegen Sie den Schieberegler Eckenradius oder geben Sie eine genaue Zahl ein und wechseln Sie die Einheit zwischen px und %.
3. Eckenstil wählen. Abgerundet, Squircle, Fase oder Konkav. Schalten Sie Alle Ecken verknüpfen aus, um jeder Ecke einen eigenen Wert zu geben, auf dem Bildschirm genau so angeordnet wie die Ecken, die sie steuern.
4. Bei Bedarf Innenabstand, Hintergrund oder Rahmen hinzufügen. Innenabstand vergrößert die Leinwand um das Bild, der Hintergrund füllt sie, und der Rahmenring folgt der abgerundeten Kontur statt dem alten Rechteck.
5. Herunterladen. Behalten Sie PNG für durchsichtige Ecken und klicken Sie dann auf Bild herunterladen. Das Panel zeigt die exportierten Abmessungen und die Dateigröße, und das CSS-Feld zeigt die entsprechende Stylesheet-Regel.

Radius in Pixeln oder in Prozent

Ein Radius in Pixeln ist absolut: 32 px sind 32 px, ob das Bild 400 oder 4000 Pixel breit ist, sodass derselbe Wert auf einer kleinen Miniatur dramatisch und auf einem großen Foto kaum sichtbar wirkt. Ein Radius in Prozent wird an der kürzeren Seite des Bildes gemessen, skaliert also mit dem Bild und sieht bei jedem Export gleich aus. 50 % ist der maximal sinnvolle Wert und ergibt auf einem Quadrat einen Kreis und auf einem Rechteck eine Pille.

Die vier Eckenstile

• Abgerundet — ein Viertelkreis, dieselbe Geometrie, die ein Browser für border-radius zeichnet. Vorhersagbar und der einzige Stil, der eins zu eins auf CSS abgebildet wird.
• Squircle — eine Ecke im Superellipse-Stil. Die Kurve beginnt weiter an jeder Kante und fließt ohne den plötzlichen Krümmungswechsel eines Kreises in die gerade Seite, weshalb die Richtlinien für App-Symbole auf iOS und Android diese Form verwenden.
• Fase — die Ecke wird durch eine gerade Diagonale abgeschnitten. Schärfer und technischer als eine Kurve, und sie bleibt in kleinen Größen klar.
• Konkav — der Bogen krümmt sich nach innen und entfernt einen konkaven Biss. Zwei konkave Ecken auf gegenüberliegenden Seiten liest man sofort als Ticket oder Etikett.

Das Ausgabeformat wählen

Weil JPG keinen Alphakanal hat, füllt der Export die ausgeschnittenen Ecken mit der gewählten Hintergrundfarbe, statt sie leer zu lassen. Das ist oft genau das, was Sie wollen — ein weißes abgerundetes Foto auf einer weißen Seite — aber es ist keine Transparenz und lässt sich später nicht rückgängig machen.

Wichtige Funktionen

• Von Grund auf privat: die Datei wird mit der FileReader-API des Browsers gelesen und lokal auf einer Leinwand gezeichnet. Sie wird niemals hochgeladen.
• Bearbeitung per Ziehen an der Ecke: ziehen Sie einen Anfasser diagonal in der Vorschau und sehen Sie, wie der Radius Finger oder Cursor folgt.
• Steuerung pro Ecke: runden Sie nur die beiden oberen Ecken ab oder machen Sie eine Seite konkav und lassen Sie den Rest eckig.
• Vorschaugründe: wechseln Sie zwischen Transparenz-Schachbrett, Weiß, Dunkel und einem Farbverlauf, um die Alpha-Kante vor dem Download zu prüfen.
• Innenabstand, Hintergrundfüllung und Rahmenring, die alle derselben abgerundeten Kontur folgen.
• Ausgabeskala: exportieren Sie in Originalauflösung oder verkleinern Sie im selben Durchgang auf 75 %, 50 % oder 25 %.
• Kopierbares CSS: die erzeugte border-radius-Regel bildet dieselbe Form in einem Stylesheet nach, wenn eine Datei nicht die richtige Antwort ist.
• Kantenglättung: die Ecke wird als Clip-Pfad gezeichnet, sodass die Kurve glatt bleibt statt einer treppenförmigen, gezackten Kante.

Bilddatei oder CSS?

Wenn das abgerundete Bild in ein Foliendeck, ein PDF, eine E-Mail-Signatur, eine Marktplatzliste oder ein Tool geht, das Ihr Stylesheet nicht ausführt, brauchen Sie eine echte Datei mit echter Transparenz — exportieren Sie ein PNG. Wenn es auf eine Webseite kommt, die Sie kontrollieren, ist eine CSS-Regel leichter, bleibt in jeder Größe scharf und lässt sich später leichter ändern; kopieren Sie stattdessen das Snippet. Beides schließt sich nicht aus: viele Teams liefern das PNG für die externe Nutzung und das CSS für die Website.

Fehlerbehebung

• Die Ecke sieht gezackt aus: die Quelle ist vermutlich schon klein. Runden Sie in der größten verfügbaren Auflösung ab und skalieren Sie dann herunter, statt ein vergrößertes Bild abzurunden.
• Ein dünner heller Hof erscheint auf dunklem Hintergrund: das Bild hatte eine eingebrannte weiße Matte. Fügen Sie ein oder zwei Pixel Innenabstand in einer passenden Farbe hinzu oder erhöhen Sie den Radius leicht, damit der Hof weggeschnitten wird.
• Der Download öffnet sich als weißes Quadrat: das Format ist JPG oder der Hintergrund steht nicht auf Transparent. Stellen Sie das Ausgabeformat auf PNG um.
• Ein sehr großes Foto fühlt sich langsam an: die Leinwand zeichnet bei jeder Schiebereglerbewegung das Bild in voller Auflösung neu. Lassen Sie den Schieberegler los und geben Sie dem Browser einen Moment oder verringern Sie die Ausgabeskala.
• Ein animiertes GIF verliert die Animation: Canvas exportiert einen einzelnen Frame. Nur der erste Frame wird abgerundet und gespeichert.

Häufig gestellte Fragen

Wird mein Bild auf einen Server hochgeladen?

Nein. Die Datei wird von Ihrem Browser mit der FileReader-API gelesen und auf einem HTML-Canvas auf Ihrem eigenen Gerät gezeichnet. Nichts wird an miniwebtool gesendet, sodass private Screenshots, Kundenmotive und persönliche Fotos Ihren Computer nie verlassen. Die Seite selbst braucht weiterhin eine Internetverbindung, um zu laden.

Warum sehen meine abgerundeten Ecken weiß oder schwarz statt transparent aus?

Nur PNG und WebP können Transparenz speichern. Wenn Sie JPG exportieren, hat das Format keinen Alphakanal, daher werden die ausgeschnittenen Ecken mit der Hintergrundfarbe gefüllt. Wählen Sie PNG in der Liste Ausgabeformat und stellen Sie den Hintergrund auf Transparent. Wenn die Ecken trotzdem falsch aussehen, prüfen Sie, ob die App oder Website, in die Sie einfügen, Alpha unterstützt, denn einige Editoren legen PNG-Transparenz auf Weiß flach.

Wie erstelle ich ein perfekt kreisförmiges Bild?

Stellen Sie die Radius-Einheit auf Prozent und den Radius auf 50 %. Bei einem quadratischen Bild entsteht ein perfekter Kreis. Bei einem Rechteck entsteht eine Pillen- oder Stadionform, weil ein Prozent-Radius an der kürzeren Seite gemessen wird. Nutzen Sie die Voreinstellung Kreis, um in einem Klick auf ein Quadrat zuzuschneiden und abzurunden.

Was ist der Unterschied zwischen abgerundeten, Squircle-, Fase- und konkaven Ecken?

Abgerundet ist ein einfacher Viertelkreis, dieselbe Form, die CSS border-radius zeichnet. Squircle zieht die Kurve weiter an jeder Kante entlang, sodass der Übergang glatt und durchgehend ist – das ist der Look von iOS- und Android-App-Symbolen. Fase schneidet die Ecke mit einer geraden Diagonalen ab. Konkav krümmt sich nach innen statt nach außen und fräst aus jeder Ecke einen konkaven Biss, der zu Tickets, Coupons und Abzeichen passt.

Stimmt der Radius in Pixeln mit dem CSS-border-radius auf meiner Website überein?

Der Radius wird in den eigenen Pixeln des Bildes angewendet und stimmt mit CSS nur überein, wenn das Bild in natürlicher Größe angezeigt wird. Ein 1200 Pixel breiter Export in einer 600 Pixel breiten Spalte wird um die Hälfte skaliert, sodass ein Radius von 48 Pixeln auf dem Bildschirm wie 24 Pixel wirkt. Nutzen Sie die Prozent-Einheit für ein größenunabhängiges Ergebnis oder kopieren Sie das CSS-Snippet, das das Tool erzeugt und bereits das skalierte Äquivalent angibt.

Kann ich die Bildqualität und die Originalauflösung behalten?

Ja. Der Export behält die ursprünglichen Pixelmaße, sofern Sie die Ausgabeskalierung nicht ändern oder Innenabstand hinzufügen, und PNG ist verlustfrei, sodass nichts neu komprimiert wird. Nur die Eckpixel ändern sich von deckend zu transparent. WebP und JPG sind verlustbehaftet; nutzen Sie sie, wenn die Dateigröße wichtiger ist als eine exakte Kopie der Quellpixel.