Softonic

Bild mit abgerundeten Ecken

Schritt 1 / 3 Eckenradius

Betriebssysteme, App-Stores und UI-Designsysteme mögen alle abgerundete Ecken, iOS-Icons, Material-Karten, moderne Tailwind-Komponenten. Laden Sie ein beliebiges Bild hoch und dieses Tool rundet die vier Ecken auf den von Ihnen festgelegten Radius, exportiert als PNG mit transparenten Ecken und wendet optional einen anderen Radius pro Ecke für Ticket-Streifen oder Sprechblasen-Looks an.

So runden Sie die Ecken eines Bildes

  1. 1

    Laden Sie ein Bild hoch

    JPG, PNG oder WebP.

  2. 2

    Wählen Sie einen Radius

    In Pixeln oder als Prozentsatz der kürzeren Seite.

  3. 3

    Optional: unterschiedlich pro Ecke

    Runden Sie nur die oberen Ecken (Karte) oder asymmetrisch (Ticket).

  4. 4

    Hintergrund wählen

    Transparent (PNG) oder eine einfarbige, wenn Sie als JPG speichern.

  5. 5

    Exportieren

    PNG bewahrt abgerundete Alpha; JPG wird auf die von Ihnen gewählte Farbe reduziert.

Radiuswahl für gängige UI-Formen

Radius-Voreinstellungen

Form Radius
Subtile UI-Karte 4-8 px
Material Design-Karte 4 px (oder 8 px in M3)
iOS-App-Icon 22,37% der Seite (der “Squircle”)
macOS-App-Icon 18,75% der Seite
Instagram-Story-Blase 12-16 px
Abgerundetes Avatar 50% der kurzen Seite (vollständig rund)
Ticket-Streifen Asymmetrisch, runden Sie nur eine oder zwei Ecken
Sprechblasen-Schwanzseite Eine Ecke klein, der Rest größer

Das Squircle-Problem

iOS-Icons sind keine einfachen abgerundeten Rechtecke, sie verwenden eine “Superellipse”, die mathematisch glatter beim Übergang ist. Echte Squircles liegen über dem, was ein CSS border-radius oder eine einfache Alpha-Maske rendern kann; das Tool nähert sie mit einem hochgradig abgerundeten Rechteck an, das in typischen Icon-Größen nicht unterscheidbar aussieht.

Transparenzverhalten

  • PNG-Ausgabe ist die Standardoption, die abgerundeten Ecken werden zu transparenten Pixeln. Nützlich für App-Icons, UI-Karten und überall dort, wo Sie das Bild auf einen variierenden Hintergrund legen müssen.
  • JPG-Ausgabe kann nicht transparent sein. Die abgerundeten Ecken füllen sich mit einer von Ihnen gewählten Farbe, wodurch das Foto wie gerahmt aussieht.

Unterschiedlicher Radius pro Ecke

Ein Sprechblasen-Look: runden Sie drei Ecken auf 12 px und lassen Sie eine bei 0 px (die Ecke, an der der “Schwanz” befestigt wäre). Ein Ticket-Streifen: zwei scharfe und zwei abgerundete. Asymmetrische Radien sind eine schnelle Möglichkeit, um zu suggerieren, dass das Bild an etwas anderem befestigt ist.

Anti-Aliasing

Eckenkrümmungen werden mit 4x Super-Sampling gezeichnet, sodass sie bei normalen Betrachtungsgrößen scharf aussehen. Gedruckt oder stark vergrößert bleibt der Radius sichtbar glatt.

Häufig gestellte Fragen

Apple verwendet einen Squircle, dessen Eckkrümmung ungefähr 22,37% der Icon-Seite beträgt. Auf einer 1024 × 1024 Leinwand sind das etwa 229 px effektiver Eckradius, obwohl die genaue Mathematik leicht von einem einfachen abgerundeten Rechteck abweicht.

Ja. Der Radius wird pro Ecke unabhängig vom Seitenverhältnis des Bildes angewendet. Bei extremen Verhältnissen (sehr breit oder sehr hoch) ergibt das Setzen des Radius auf 50% der kurzen Seite eine Kapsel-Form.

Nein, JPG unterstützt keine Transparenz. Entweder als PNG exportieren, um die abgerundete Alpha zu behalten, oder eine Hintergrundfarbe für das JPG wählen, und die Ecken füllen sich mit dieser Farbe.

Ja. Das Tool fügt nur eine Alpha-Maske hinzu und ändert die Bildgröße nicht. Wenn Sie Abrunden mit Größenänderung kombinieren möchten, wenden Sie zuerst den Größenänderer an.

Verwandte Tools

Material Design Farbpicker

Durchsuchen Sie die Material Design Farbpalette. Kopieren Sie jeden Farbton (50 bis A700) als HEX, RGB oder HSL mit einem Klick.

ARW zu JPG Konverter

Konvertieren Sie ein Sony-ARW-RAW-Foto bis 100 MB in ein weit verbreitetes JPG und wählen Sie eine JPEG-Qualität zwischen 60 % und 100 %.

Bild zu Word

Text lokal aus PNG-, JPG- oder WebP-Bildern per OCR in 18 Sprachen erkennen, im Browser prüfen und als bearbeitbare DOCX- oder TXT-Datei speichern.

Kreuzstichvorlagen erstellen

Wandeln Sie JPEG-, PNG- oder WebP-Bilder in druckbare Kreuzstichvorlagen mit 10–150 Stichen, 2–40 eigenen Farben, Symbolen, exakten Zählwerten und Stoffmaßen um.

Favicon-Konverter

Wandle PNG, JPEG oder WebP in eine Favicon-ZIP mit mehrstufiger ICO-Datei, sieben PNG-Icons, Manifestdateien und einem HTML-Head-Snippet um.

Kontaktbogen erstellen

Ordnen Sie Fotos auf druckbaren A4- oder Letter-Kontaktbögen an, ergänzen Sie Beschriftungen und laden Sie die Seiten als JPEG oder PDF herunter.

Tool in anderen Sprachen verfügbar