Bild-Tools · läuft in Ihrem Browser

Bildecken abrunden

Bildecken abrunden oder als Kreis zuschneiden – als transparentes PNG.

Keine Anmeldung Kein Dateilimit Nichts wird hochgeladen

Bildecken abrunden

So wird es benutzt 4 Schritte
  1. Drücken Sie Bild auswählen.
  2. Wählen Sie eine Form und legen Sie den Eckenradius fest.
  3. Wählen Sie, was hinter den Ecken liegt: transparent oder eine Farbe.
  4. Drücken Sie Ecken abrunden und laden Sie das Ergebnis herunter.
Vollständig in deinem Browser verarbeitet. Nichts wird hochgeladen.
Ein Anteil der kürzeren Seite, sieht also bei jeder Größe gleich aus.
Ergebnis

JPEG hat keinen Alphakanal — eine transparente Ecke kann es nicht überstehen. Die Wahl von JPEG erzwingt den deckenden Hintergrund, und das Tool sagt es, statt die Ecken stillschweigend schwarz zu füllen. Die Kreis-Option schneidet auf den größten passenden Kreis aus der Mitte zu; ein Hochformat-Foto verliert oben und unten. Die Maske wird einmal gezeichnet und zusammengesetzt — die Kante ist geglättet statt gestuft.

So funktioniert dieses Werkzeug

Die Form wird als Pfad auf das Canvas gezeichnet und nur behalten, was innerhalb liegt. Drei Formen stehen bereit: abgerundete Ecken mit einem Radius Ihrer Wahl, ein in das Bild eingeschriebener Kreis, und ein Squircle — jene stetige Kurve, die auf iOS und zunehmend auch anderswo für App-Symbole verwendet wird und runder wirkt als ein abgerundetes Rechteck, ohne den sichtbaren Punkt, an dem eine kreisförmige Ecke auf eine gerade Kante trifft.

Was außerhalb der Form liegt, ist entweder transparent oder eine Farbe Ihrer Wahl. Diese Entscheidung bestimmt das Format: Transparenz braucht PNG oder WebP, und die Wahl von JPEG zieht das Bild zuvor auf diese Farbe auf, denn JPEG kennt keinen Alphakanal. Ein Kreis wird bei einem nicht quadratischen Bild in die kürzere Seite eingeschrieben und mittig gesetzt.

Eine saubere Kante bekommen

  • Transparenz heißt PNG oder WebP: Ein abgerundetes JPEG ist ein Rechteck mit farbigen Ecken. Es sieht nur vor einem Hintergrund genau dieser Farbe richtig aus und überall sonst falsch.
  • Passen Sie den Radius der Größe an: Ein Radius, der auf einem großen Bild stimmt, ist auf einem Vorschaubild kaum sichtbar. Ecken werden meist als Anteil des Bildes beurteilt und nicht in absoluten Pixeln.
  • Der Squircle ist die App-Symbol-Form: Geht das Ergebnis dorthin, wo ohnehin eine eigene Rundung angewandt wird, ist ein quadratisches Bild sicherer — zwei nacheinander angewandte Rundungen sehen falsch aus.
  • Das Runden ist hier zerstörend: Die Ecken sind aus der Datei verschwunden. Wo die Anzeige selbst runden kann, lässt ein CSS-Radius das Original unangetastet und passt sich jeder Größe an.

Three shapes, cut on the canvas

The shape is drawn as a path and only what falls inside it is kept. Rounded corners take a radius you set; a circle is inscribed in the image and centred; and the squircle is the continuous curve used for app icons on iOS and increasingly elsewhere.

The squircle is worth knowing about. It reads as rounder than a rounded rectangle of the same radius, and it has no visible point where a circular corner meets a straight edge — which is why platform icon shapes moved to it. The [msm_tool slug="round-corners"] produces all three.

Transparency decides the format

What sits outside the shape is either transparent or a colour you choose, and that determines what you can export to.

Transparency needs PNG or WebP. Choosing JPEG flattens the image onto the colour first, because JPEG has no alpha channel — so a "rounded" JPEG is a rectangle with coloured corners. It looks correct against a background of exactly that colour and wrong everywhere else, which is the single most common complaint about rounding an image.

Match the radius to the display size

A radius that looks right on a large image is barely visible on a thumbnail, because corners are judged as a proportion of the shape rather than in absolute pixels.

If the same file serves several sizes, it needs several radii — or none, and a CSS radius instead.

Do not round twice

If the result is going somewhere that applies its own rounding — an app icon slot, a social avatar, a card component with a border radius — export a square image and let the destination do it.

Two roundings applied one after the other produce a visibly wrong shape: a pinched corner where the two curves disagree. This is why platform guidelines ask for square icon uploads even though the icons appear rounded.

A circle on a rectangle crops the long edges

The circle is inscribed in the shorter dimension and centred, so a landscape photograph loses its sides. If the subject is not centred, it will not be in the circle — crop to a square first with the subject where you want it, then round.

CSS where you control the page

A border-radius in the stylesheet leaves the original file intact, adapts to every display size, costs nothing, and can be changed without re-exporting anything. It is the right answer for anything on your own site.

Round the file when the image is going somewhere you do not control: an email, a marketplace listing, a document, a platform that will not let you style it. That is a real set of cases, and it is smaller than the number of times people round images by habit.

It is destructive

The corners are gone from the exported file. Keep the original — corner radii are a style decision, and style decisions get revisited more often than almost anything else.

Häufig gestellte Fragen

Speziell zum Bildecken abrunden. Allgemeinere Fragen zu dieser Kategorie werden auf der Kategorieseite beantwortet.

Das Ausgabeformat war JPEG, das keine Transparenz kennt, der Außenbereich wurde also auf eine Farbe aufgezogen. Wählen Sie PNG oder WebP.
Die stetig gerundete Form, die für App-Symbole verwendet wird. Sie wirkt runder als ein abgerundetes Rechteck und hat keinen sichtbaren Punkt, an dem die Kurve auf die gerade Kante trifft.
Genug, um in der Anzeigegröße sichtbar zu sein. Ecken werden proportional beurteilt, ein Vorschaubild braucht also einen viel kleineren Radius als ein Banner.
CSS, wo Sie die Anzeige kontrollieren — es ist nicht zerstörend und passt sich jeder Größe an. Runden Sie die Datei, wenn sie dorthin geht, wo Sie keine Kontrolle haben.
Er wird in die kürzere Seite eingeschrieben und mittig gesetzt, die langen Kanten werden also weggeschnitten.

Abonniere Benachrichtigungen zu neuen Tools, Funktionen und Produktivitätstipps.