Wie runde ich Ecken ohne Designsoftware ab?

Bild hier hineinziehen, Regler ziehen, PNG herunterladen. Die Rundung ist mit transparenten Ecken in die Datei geschnitten und funktioniert damit in jedem Ziel.

Wie verhält sich der Prozentradius zu border-radius?

Absichtlich identisch: Der Prozentsatz gilt der kurzen Seite, und wo zwei Radien einer Kante überlappen würden, schrumpfen beide proportional — die Browser-Regel.

Kann ich aus einem rechteckigen Foto ein rundes Profilbild machen?

Ja — der Kreismodus schneidet das größte zentrierte Quadrat und formt es in einem Schritt zur Scheibe. Das Ergebnis ist ein transparentes PNG.

Mindert das Abrunden die Bildqualität?

Nein. Pixel innerhalb der Form werden unverändert kopiert; nur die Ecken werden transparent. Auch rekomprimiert wird nichts, da die Ausgabe verlustfreies PNG ist.

Bildecken abrunden

Schneide jedes Bild mit runden Ecken oder als perfekten Kreis zu und exportiere ein PNG mit echter Transparenz — für Avatare und Folien.

Bildecken abrunden läuft vollständig in deinem Browser über das Canvas. Deine Bilder werden auf deinem Gerät verarbeitet und niemals hochgeladen.

Bild-Zuschneider öffnen

Über Bildecken abrunden

Bildecken abrunden macht, was border-radius in CSS macht — brennt es aber in die Datei, für all die Orte, an die CSS nicht reicht: Präsentationen, Dokumente, Chats, Marktplätze und App-Store-Screenshots. Zieh ein Bild hinein, wähle eine Vorgabe von dezent bis Pille oder zieh den Radiusregler; der Radius wirkt als Prozentsatz der kurzen Seite, und Eckenpaare schrumpfen gemeinsam statt sich zu überlappen — exakt so, wie Browser border-radius auflösen. Der Kreismodus schneidet zuerst das zentrierte Quadrat und dann die perfekte Scheibe — der Avatar-Workflow in einem Schritt. Exportiert wird ein PNG mit wirklich transparenten Ecken.

Funktionen

Radiusregler von 0 bis 50 % der kurzen Seite
Vorgaben: dezent, mittel, rund und Vollkreis
Überlappungsauflösung im CSS-Stil, keine gequetschten Ecken
Kreismodus mit automatischem zentriertem Quadratschnitt
Echte Alpha-Transparenz im exportierten PNG
Vorschau auf Schachbrettmuster

So verwendest du Bildecken abrunden

Bild hineinziehen oder per Klick wählen
Vorgabe wählen oder den Radiusregler ziehen
Für Avatare in den Kreismodus wechseln
Transparentes PNG herunterladen

Beispiel

Eingabe

1200×800 screenshot · radius 10%

Ausgabe

PNG with 80 px rounded corners and transparent outside

10 % der kurzen 800-px-Seite — dieselbe Rechnung wie border-radius in CSS.

Häufige Fehler & Fehlerbehebung

Die Ecken erscheinen in einer anderen App weiß. — Die Transparenz ist echt — manche Apps legen PNGs beim Einfügen auf Weiß. Füge die Datei ein, statt Bilddaten zu kopieren.
Der Kreisschnitt hat einen Teil des Motivs gekappt. — Der Kreismodus schneidet aufs zentrierte Quadrat. Schneide das Bild vorher so zu, dass das Motiv mittig sitzt — Gesichter sitzen selten exakt in der Bildmitte.
Bei 50 % entsteht eine Pille, kein Kreis. — Bei nicht quadratischen Bildern runden 50 % der kurzen Seite die Enden zu Halbkreisen — eine Pille. Für einen Kreis nutze den Kreismodus, der erst quadriert.

Häufig gestellte Fragen

Wie runde ich Ecken ohne Designsoftware ab?: Bild hier hineinziehen, Regler ziehen, PNG herunterladen. Die Rundung ist mit transparenten Ecken in die Datei geschnitten und funktioniert damit in jedem Ziel.
Wie verhält sich der Prozentradius zu border-radius?: Absichtlich identisch: Der Prozentsatz gilt der kurzen Seite, und wo zwei Radien einer Kante überlappen würden, schrumpfen beide proportional — die Browser-Regel.
Kann ich aus einem rechteckigen Foto ein rundes Profilbild machen?: Ja — der Kreismodus schneidet das größte zentrierte Quadrat und formt es in einem Schritt zur Scheibe. Das Ergebnis ist ein transparentes PNG.
Mindert das Abrunden die Bildqualität?: Nein. Pixel innerhalb der Form werden unverändert kopiert; nur die Ecken werden transparent. Auch rekomprimiert wird nichts, da die Ausgabe verlustfreies PNG ist.