Abgerundete Ecken

Alle Ecken eines Bildes runden, oder nur die, die du wählst

100 % kostenlos. Läuft vollständig in deinem Browser: deine Dateien und Daten verlassen dein Gerät nie, und es wird nichts auf einen Server hochgeladen.

add_photo_alternate

Zieh ein Bild rein oder klicke zum Hochladen

JPG, PNG, WebP, AVIF

Jump to the next useful tool without leaving your flow.

See more

Über dieses Tool

Runde die Ecken jedes Bildes online – alle vier auf einmal oder nur die, die du wählst. Runde nur die obere rechte Ecke, das obere Paar für ein Card-Thumbnail, eine Seite eines Banners oder ein diagonales Paar für eine Blattform, und nutze entweder einen Radius für jede gewählte Ecke oder einen anderen Pixelwert für jede. Die weggeschnittenen Ecken sind transparent (oder mit einer Farbe gefüllt, die du wählst), und das fertige Bild lädt als PNG in originaler Auflösung. Es wirkt wie CSS border-radius, ins Bild selbst gebacken – praktisch überall, wo border-radius nicht verfügbar ist: E-Mail, Dokumente, Folien und App Stores. Alles läuft in deinem Browser auf einer HTML-Canvas, das Bild wird nie hochgeladen.

So verwendest du dieses Tool

  1. Lade dein Bild hochLege ein JPG, PNG, WebP oder AVIF auf den Upload-Bereich oder klicke zum Auswählen. Es öffnet in deinem Browser – nichts wird hochgeladen.
  2. Die zu rundenden Ecken wählenKlicke die Ecken-Buttons um die Form oder wähle ein Preset: Alle, Oben, Unten, Links, Rechts, eine einzelne Ecke oder ein diagonales Paar.
  3. Den Radius setzenZiehe den Schieber oder tippe einen exakten Pixelwert. Wechsle zu „Pro Ecke“, um jeder gewählten Ecke einen eigenen Radius zu geben.
  4. Den Ecken-Hintergrund wählenBehalte die weggeschnittenen Ecken transparent oder fülle sie mit einer Vollfarbe, die zum Platz des Bildes passt.
  5. PNG herunterladenSpeichere das Ergebnis in voller Originalauflösung mit erhaltenen runden Ecken.

Warum es nutzen

  • Runde jede Kombination von Ecken: alle vier, oben, unten, links, rechts, eine einzelne Ecke oder ein diagonales Paar.
  • Ein gemeinsamer Radius für jede gewählte Ecke oder ein separater Radius für jede Ecke in exakten Pixeln.
  • Transparente Ecken standardmäßig, mit optionaler solider Hintergrundfarbe.
  • Lädt in originaler Auflösung herunter – nur die On-Screen-Vorschau ist verkleinert.
  • Überlappende Radien schrumpfen gleichmäßig, so wie Browser CSS border-radius handhaben, Kanten brechen nie.
  • Läuft komplett in deinem Browser: kein Upload, kein Konto und kein Wasserzeichen.

Häufige Anwendungen

  • Nur die oberen Ecken eines Produkt- oder Blog-Thumbnails runden, das auf einer Text-Card sitzt.
  • Ein Bild an ein UI-Element mit einer einzelnen runden Ecke anpassen, etwa Sprechblase, Tab oder Badge.
  • Asymmetrische „Blatt“-Formen erzeugen, indem gegenüberliegende Ecken für Poster und Social-Grafiken gerundet werden.
  • Bilder für HTML-E-Mails runden, wo Clients wie Outlook CSS border-radius auf Bildern ignorieren.
  • Runde Avatare, App-Screenshots und Store-Listing-Bilder für Plattformen vorbereiten, die sie nicht für dich runden.
  • Weiche Ecken an Fotos für Folien, Dokumente und Präsentationen setzen.

Tipps für bessere Ergebnisse

  • Nutze „Pro Ecke“, wenn das Bild zu einer Card passen muss, deren Ecken sich unterscheiden, zum Beispiel 16px oben und 0 unten.
  • Der Radius wird in Pixeln des Originalbildes gemessen, also wirkt 40px auf einem 4000px-Foto dezent und auf einem 400px-Icon kühn. Die Presets Klein, Mittel und Groß skalieren mit der Bildgröße.
  • Für einen perfekten Kreis schneide das Bild zuerst quadratisch zu, wähle dann Alle und drücke Max.
  • Wird das Bild auf High-Density-Screens in halber Größe gezeigt, verdopple den CSS-Radius, den du willst, damit die Ecken zu deinem Design passen.
  • Wähle eine solide Hintergrundfarbe statt transparent, wenn das Bild irgendwo platziert wird, das keine Transparenz unterstützt.
  • Das Schachbrett hinter der Vorschau zeigt genau, welche Bereiche im Download transparent sein werden.

Fehler, die du vermeiden solltest

  • Das heruntergeladene PNG nach JPG konvertieren, wodurch die transparenten Ecken weiß oder schwarz werden.
  • Den Radius aus deinem CSS nutzen, wenn das Quellbild viel größer als seine Display-Größe ist, sodass die Ecken weit kleiner als erwartet rauskommen.
  • Alle vier Ecken runden, wenn das Design nur das obere Paar rundet, und eine sichtbare Lücke lassen, wo das Bild auf den Card-Body trifft.
  • Max auf einem rechteckigen Bild drücken und einen Kreis erwarten – es erzeugt eine Pillenform. Schneide zuerst quadratisch zu.
  • Das Bild runden und zusätzlich border-radius in CSS darauf anwenden, wodurch die Ecken zweimal mit unterschiedlichen Radien geclippt werden.

Unterstützte Formate

  • JPG
  • PNG
  • WebP
  • AVIF
  • GIF
  • BMP

Verfügbare Optionen

  • Corners to round: top left, top right, bottom right, bottom left
  • Shape presets: All, Top, Bottom, Left, Right, single corner, Diagonal
  • Radius mode: Same for all selected corners, or Per corner
  • Radius in pixels (slider and exact number field)
  • Radius presets: None, Small, Medium, Large, Max, 8px, 16px, 32px
  • Corner background: Transparent or solid colour

Häufig gestellte Fragen

Lade das Bild hoch und tippe dann auf die Vorgabe für diese Ecke (zum Beispiel Oben rechts) oder klicke im Eckenwähler auf ihren Button, sodass nur sie ausgewählt ist. Ziehe den Radius-Regler – nur diese Ecke wird abgerundet, die anderen drei bleiben eckig. Lade das PNG herunter, wenn es passt.

Ja. Die Vorgaben Oben, Unten, Links und Rechts runden die beiden Ecken dieser Seite ab und lassen die anderen eckig. Nur die oberen Ecken abzurunden ist die übliche Wahl für ein Vorschaubild, das oben auf einer Karte sitzt, mit Text darunter.

Ja. Stelle den Radius-Modus von Gleich auf Pro Ecke um – dann bekommt jede ausgewählte Ecke einen eigenen Regler und ein Pixel-Feld, zum Beispiel 60px oben links und 20px unten rechts. Nicht ausgewählte Ecken bleiben eckig.

Starte mit einem quadratischen Bild, wähle Alle Ecken und tippe auf die Vorgabe Max – ein Radius von der halben Seitenlänge macht aus einem Quadrat einen Kreis. Bei einem rechteckigen Bild ergibt dieselbe Einstellung eine Pillenform (Stadion), also schneide das Bild zuerst quadratisch zu, wenn du einen echten Kreis brauchst.

Wenn sich zwei Ecken derselben Kante überlappen würden, werden alle Radien gleichmäßig verkleinert, damit die Kurven sauber zusammenlaufen. Das ist dieselbe Regel, die Browser für CSS border-radius nutzen. Der Radius wird außerdem in Pixeln des Originalbilds gemessen, deshalb brauchen große Fotos viel höhere Werte als kleine Icons.

Ja, standardmäßig ist der Bereich außerhalb der Kurve vollständig transparent und das Bild wird als PNG gespeichert, damit die Transparenz erhalten bleibt. Wenn das Ziel keine Transparenz darstellen kann, wähle Farbe – dann werden die Ecken mit der von dir gewählten Farbe gefüllt.

Nein. Der Download wird in den originalen Pixelmaßen deines Bildes gerendert und als verlustfreies PNG gespeichert. Die Vorschau auf der Seite kann verkleinert sein, damit sie schnell bleibt – die Datei, die du herunterlädst, ist in voller Größe.

Nein. Das Bild wird auf einem HTML-Canvas in deinem Browser geladen und abgerundet, und das PNG entsteht auf deinem Gerät. Nichts wird an einen Server gesendet oder gespeichert.

Ja. Er ist kostenlos, ohne Konto, ohne Limit, wie viele Bilder du abrundest, und ohne Wasserzeichen auf dem Ergebnis.

Ja, in modernen mobilen Browsern. Sehr große Fotos brauchen mehr Arbeitsspeicher, deshalb ist ein Desktop-Browser bei hochauflösenden Bildern schneller.

Andere suchen auch nach

  • ecken von bild online abrunden
  • nur obere ecken eines bildes abrunden
  • eine ecke eines bildes abrunden
  • abgerundete ecken auf einer seite des bildes
  • unterschiedlicher border-radius für jede ecke bild
  • abgerundete ecken png transparenter hintergrund
  • abgerundete ecken bilder kostenlos erstellen
  • border-radius zu bild online hinzufügen
  • bildkanten abrunden ohne photoshop
  • abgerundete ecken bild für e-mail

Related guides