Abgerundete Ecken und runde Bilder für Websites

Abgerundete Ecken können Fotos an ein Kartenlayout anpassen, kreisrunde Porträts geben Teamseiten eine einheitliche Form. Diese sollte den Inhalt unterstützen: Ein Kreis, der Gesichter abschneidet, oder eine Rundung, die wichtige Produktdetails verdeckt, verbessert das Bild nicht.

Du kannst entweder die Bilddatei verändern oder ihre Darstellung im Browser abrunden. Entscheidend sind der Einsatzort und die Frage, ob du die Form später noch ändern möchtest.

CSS verwenden oder die Bilddatei bearbeiten?

CSS ist auf einer selbst verwalteten Website meist flexibler. Du kannst dasselbe Original in verschiedenen Layouts nutzen, die Rundungen websiteweit anpassen und den Ausschnitt ohne erneuten Export ändern. Viele Website-Editoren bieten dafür eine eigene Einstellung.

Bearbeite die Datei, wenn eine Website oder App Bilder annimmt, aber keine Eckeneinstellungen bietet, oder wenn du das abgerundete Bild in einem anderen Entwurf brauchst. Die transparenten Ecken werden in der Datei gespeichert und hängen nicht vom CSS deiner Website ab.

Wähle Form und Radius passend zum Inhalt

Überlege zuerst, was das Bild zeigen soll. Für ein kleines Porträt kann ein Kreis passen, weil das Gesicht im Mittelpunkt steht. Landschaftsfotos, Screenshots und Produktdetails brauchen meist einen rechteckigen Rahmen, damit mehr Informationen erhalten bleiben.

Probiere für Website-Karten einen dezenten Radius wie 12 oder 16 CSS-Pixel und betrachte ihn neben Karten, Schaltflächen und anderen Bildern. Das sind Gestaltungsbeispiele, keine Vorgaben. Einige wiederkehrende Radien erleichtern ein einheitliches Erscheinungsbild mehr als eine individuelle Rundung für jedes Foto.

Beurteile das Ergebnis in der tatsächlichen Anzeigegröße. Eine dezente Rundung im großen Original kann in einer Vorschau fast verschwinden. Gespeicherte Bildecken skalieren mit dem Bild. Ein fester CSS-Radius von etwa 16 Pixeln behält dagegen diese CSS-Größe, auch wenn sich die Anzeigebreite verändert.

Ein Beispiel: Bei 800 × 400 Pixeln und 25% Rundung in Pixilo beträgt der gespeicherte Radius 50 Pixel. Bei einer Anzeige mit 400 × 200 halbiert er sich sichtbar auf etwa 25 CSS-Pixel. Bei 200 × 100 sind es etwa 12,5 CSS-Pixel. Wähle die Rundung anhand der späteren Darstellung und nicht nur der Vollbildvorschau.

Halte wichtige Inhalte von den Ecken fern. Prüfe bei Gruppenfotos Personen am Rand, bei Screenshots Beschriftungen und Bedienelemente. Verschwindet ein wichtiges Detail, verringere die Rundung oder ändere den Ausschnitt, statt das Bild in die Form zu zwingen.

Bildecken mit Pixilo abrunden

1. Arbeitskopie vorbereiten. Bewahre das Original separat auf. Für eine andere Bildform nutze zuerst das Zuschneidewerkzeug. Sind die Abmessungen zu groß, verkleinere die Kopie vor dem Abrunden.
2. Bild auswählen. Öffne Abgerundete Bildecken und wähle eine JPG-, PNG- oder WebP-Datei.
3. Ecken abrunden einstellen. Beginne mit einem kleinen Wert und erhöhe ihn anhand der Vorschau. Alle vier Ecken verwenden denselben Radius.
4. Füllung der entfernten Ecken wählen. Lass Transparenter Hintergrund aktiviert, wenn das Bild auf verschiedene Seitenfarben passen soll. Deaktiviere die Option, um eine Hintergrundfarbe zu wählen.
5. Herunterladen und prüfen. Wähle PNG herunterladen, öffne die gespeicherte Datei und prüfe die Kanten auf dem vorgesehenen Hintergrund.

Das Werkzeug behält die Pixelbreite und -höhe bei. Es entfernt oder füllt die Ecken innerhalb dieser Abmessungen, ändert aber weder die Bildgröße noch den Hintergrund hinter dem Motiv.

Was bedeutet der Rundungsprozentsatz?

Pixilo berechnet den Radius als Prozentsatz der halben kürzeren Bildseite. Bei 0% bleiben die Ecken rechtwinklig, bei 100% wird der größte passende Kreisradius verwendet. Im Beispiel mit 800 × 400 beträgt die halbe kürzere Seite 200 Pixel; 25% davon sind 50 Pixel.

Der Regler entspricht nicht einer CSS-Prozentangabe. CSS berechnet horizontale Prozent-Radien aus der Breite und vertikale aus der Höhe. Bei einer nicht quadratischen Fläche erzeugt border-radius: 50% eine Ellipse. Pixilos 100% machen aus einem Rechteck eine Kapselform und aus einem Quadrat einen Kreis.

Ein kreisrundes Bild mit Pixilo erstellen

Beginne mit einem quadratischen Bild. Ein breites Bild bleibt auch bei maximaler Rundung breit. Lege deshalb zuerst den Ausschnitt fest.

1. Auf 1:1 zuschneiden. Öffne das Original im Zuschneidewerkzeug und wähle einen quadratischen Ausschnitt. Lass Platz um Kopf oder Objekt: Der Kreis verdeckt die Ecken des Quadrats.
2. Passende Abmessungen wählen. Eine Kopie mit 320 × 320 Pixeln ist eine Möglichkeit für ein Porträt, das auf einem 2×-Display mit 160 × 160 CSS-Pixeln erscheint. Nutze bei Bedarf die Bildgrößenanpassung. Vergleiche Details in der Anzeigegröße und vergrößere eine kleine Quelle nicht bloß für diese Maße.
3. Quadrat abrunden. Wähle die vorbereitete Datei in Abgerundete Bildecken, stelle Ecken abrunden auf 100% und lass Transparenter Hintergrund aktiviert.
4. Gespeicherten Kreis prüfen. Lade das PNG herunter und kontrolliere, ob Kopf, Haare und wichtige Details bequem in die sichtbare Fläche passen.

Der Kreis liegt in einem quadratischen PNG mit transparenten Ecken. Breite und Höhe der Datei bleiben gleich, nur der sichtbare Umriss wird rund. Eine Wand oder ein Raum hinter der Person bleibt innerhalb des Kreises sichtbar.

Abgerundete Ecken mit CSS hinzufügen

Bietet dein Editor bereits eine Radius-Einstellung, probiere sie zuerst. Bei einer eigenen Umsetzung muss das CSS das Bildelement ansprechen:

1. Klasse hinzufügen. Wenn du HTML bearbeitest, nutze das folgende Beispiel oder ergänze rounded-image im class-Attribut deines vorhandenen <img>-Elements. Trage den Namen im CSS-Klassenfeld des Editors ohne führenden Punkt ein und prüfe, ob die Klasse am Bild oder einem umgebenden Element landet.
2. CSS hinzufügen. Füge das CSS-Beispiel in die Stylesheet-Datei oder das Feld für eigenes CSS ein. Der führende Punkt in .rounded-image bleibt erhalten: Er wählt Elemente dieser Klasse aus. Ein CSS-Feld erwartet normalerweise nur CSS, ohne HTML-<style>-Tags.
3. Veröffentlichtes Bild prüfen. Ersetze Beispielpfad und Bildangaben, wenn du das HTML verwendest. Prüfe die Vorschau und ob andere Theme- oder Editor-Stile die Regeln überschreiben.

Dieses Beispiel erhält die Proportionen und lässt das Bild innerhalb seines Containers schrumpfen:

<img
  class="rounded-image"
  src="/images/finished-kitchen.webp"
  width="1200"
  height="800"
  alt="Fertige Küche mit Eichenschränken und Steinarbeitsplatte">

.rounded-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

Verwende eigenen Dateipfad, Abmessungen und Alt-Text. HTML-Breite und -Höhe beschreiben die Quelldimensionen und helfen, Platz zu reservieren. CSS steuert Anzeigegröße und Eckform. Gehe beim folgenden Kreisbeispiel genauso vor, aber mit der Klasse team-avatar und ihrem CSS.

Setzt der Editor die Klasse auf einen umgebenden Wrapper, ersetze den CSS-Selektor .rounded-image durch .rounded-image img. Beim Kreisbeispiel verwende .team-avatar img statt .team-avatar. So gelten Größen- und Rundungsregeln für das Bild innerhalb des Wrappers.

Der Wert 16px rundet alle vier Ecken. CSS erlaubt auch unterschiedliche Radien: border-radius: 16px 16px 0 0 rundet nur die oberen Ecken. Die Reihenfolge lautet oben links, oben rechts, unten rechts, unten links. Pixilo rundet derzeit alle vier gleich. Die vollständige Syntax und Prozentberechnung erklärt MDNs border-radius-Referenz.

CSS verändert die Darstellung auf dieser Seite, nicht die heruntergeladene Quelldatei. Öffnest oder speicherst du das Original separat, enthält es die CSS-Form nicht. Auch durch CSS verborgene Teile bleiben in der Quelle.

Ein kreisrundes Bild mit CSS erstellen

Ein CSS-Kreis benötigt gleiche angezeigte Breite und Höhe. Das Quellfoto darf rechteckig sein: object-fit: cover füllt das Quadrat, ohne die Person zu verzerren; die Rundung schneidet daraus einen Kreis.

<img
  class="team-avatar"
  src="/images/team-portrait.webp"
  width="800"
  height="1200"
  alt="Maya, Physiotherapeutin">

.team-avatar {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 50%;
}

Hier hat die Quelle 800 × 1200 Pixel und erscheint in einem Quadrat mit 160 × 160 Pixeln. Passe diese Werte an Bild und Layout an. Änderst du die Anzeigegröße am mobilen Breakpoint, müssen Breite und Höhe gleich bleiben.

object-fit: cover erhält die Proportionen und schneidet Überstehendes ab. object-position: 50% 40% zentriert horizontal und zeigt bei dieser hochformatigen Quelle einen etwas höher gelegenen Ausschnitt als die Standardzentrierung. Gesichter werden dadurch nicht vergrößert oder verkleinert. Passe die Position je Porträt an.

MDN erläutert object-fit und object-position genauer. Zwinge ein Rechteckfoto nicht ohne passende Einpassung in ein Quadrat, sonst kann das Motiv verzerrt werden.

Beispiel: einheitliche Teamporträts

Eine Praxis hat vier Mitarbeiterfotos: zwei Kopf-Schulter-Porträts, ein weiteres Foto im Behandlungsraum und ein eng beschnittenes Gesicht. Auf der Teamseite sollen alle in Kreisen mit 160 × 160 Pixeln erscheinen. Dieselbe Außenform ist erst der Anfang.

1. Referenzausschnitt wählen. Lege anhand eines Porträts fest, wie viel von Kopf und Schultern sichtbar sein soll. Lass Luft über den Haaren und platziere die Augen ungefähr auf gleicher Höhe. Nutze das als visuelle Orientierung, nicht als starres Maß für jede Person.
2. Gesichtsgrößen angleichen. Schneide das weite Raumfoto enger zu, damit die Person nicht viel kleiner wirkt. Fehlen beim engen Porträt bereits Haare oder Kinn, nutze nach Möglichkeit ein weiter gefasstes Original. Ein größerer Kreis stellt fehlenden Inhalt nicht wieder her.
3. Kreisumsetzung wählen. Bereite für CSS zuerst die Ausschnitte vor, verwende denselben 160 × 160-Rahmen und passe die Position je Bild an. Für gespeicherte Kreisformen erstelle gleiche quadratische Kopien, etwa passende 320 × 320 Pixel, und runde alle mit Pixilo auf 100%.
4. Die Reihe gemeinsam prüfen. Stelle die Porträts neben ihre Namen in der tatsächlichen Anzeigegröße. Kein Gesicht sollte nur wegen eines engeren Ausschnitts dominieren. Prüfe danach das mobile Layout, in dem die Porträts untereinander stehen können.

Einheitlichkeit entsteht durch ähnliche Ausschnitte und Gesichtsgrößen ebenso wie durch den Kreis. Erhalte hilfreichen Kontext, setze Namen und Funktionen aber als Seitentext statt sie ins Porträt einzubetten.

Hintergrund und Dateiformat wählen

Speichere mit Transparenz, wenn das Bild auf verschiedenen Seitenfarben oder im Dunkelmodus funktionieren soll. Eine weiße Ecke fällt auf Weiß kaum auf, wirkt auf einer dunklen Karte aber wie ein quadratischer Fleck. Manche Betrachter zeigen Transparenz auf Weiß oder einem Schachbrettmuster. Teste einen anderen Hintergrund, bevor du weiße Pixel vermutest.

Ist Transparenter Hintergrund deaktiviert, füllt Pixilos gewählte Farbe die entfernten Ecken und bereits transparente Bereiche. Einen deckenden Fotohintergrund ersetzt sie nicht. Brauchst du nach weiß gefüllten Ecken doch Transparenz, gehe zum Original zurück und speichere erneut mit aktivierter Transparenz.

PNG erhält Transparenz und fügt keine weitere verlustbehaftete Komprimierung hinzu, kann ein Foto aber vergrößern. Vergleiche für die Website eine WebP-Kopie, die Transparenz erhalten kann. Pixilo konvertiert verlustbehaftet, also prüfe Kanten und Details. JPG kann keine transparenten Ecken speichern. Unser Leitfaden zu transparenten Hintergründen erklärt diese Formatwahl.

Mit CSS braucht das Foto selbst keine Transparenz. Behalte ein geeignetes JPG oder WebP und lass den Browser die Darstellung abrunden. CSS komprimiert die Quelle nicht. Wähle passende Abmessungen und vergleiche Größe und Schärfe der ausgelieferten Datei.

Prüfe das Ergebnis im echten Layout

• Motiv prüfen. Achte auf Gesichter, Haare, Produktkanten und Text am Rand. Die Form soll die nötigen Informationen erhalten.
• Kleine Bildschirme prüfen. Bei einem CSS-Kreis müssen angezeigte Breite und Höhe gleich bleiben. Beurteile auch den Radius in der endgültigen Größe.
• Seitenhintergründe ausprobieren. Suche auf hellen und dunklen Flächen nach deckenden Ecken oder hellen Säumen.
• Endversion prüfen. Website oder App können die Datei skalieren, zuschneiden oder konvertieren. Prüfe die gespeicherte oder veröffentlichte Kopie auch nach Formatwechseln.
• Hilfreichen Alternativtext behalten. Beschreibe die Funktion statt nur die Form. Ein Teamporträt sollte die Person im Kontext identifizieren; dekorative Bilder brauchen normalerweise leeren Alt-Text. Siehe unseren Leitfaden zu Alt-Texten und Dateinamen.

Häufig gestellte Fragen

Warum wurde das Bild oval oder kapselförmig?

Prüfe zuerst die Proportionen. Ein CSS-Kreis benötigt gleiche Anzeigebreite und -höhe. In Pixilo schneidest du vor 100% Rundung ein Quadrat zu. Der Formvergleich oben zeigt, warum ein Rechteck einen anderen Umriss ergibt.

Warum sind die Ecken noch weiß?

Teste zunächst einen anderen Hintergrund wie oben beschrieben. Sind tatsächlich weiße Pixel vorhanden, prüfe eine gewählte Vollfarbe oder eine JPG-Konvertierung. Auch Website oder App könnten Transparenz durch Weiß ersetzt haben. Speichere vom Original eine neue transparente Kopie und prüfe das Format nach der Veröffentlichung.

Warum sind die Bildecken in einer abgerundeten Karte noch rechtwinklig?

Die Rundung einer Elternkarte beschneidet ihr Bild nicht automatisch. Runde das Bild selbst ab oder nutze einen abgerundeten Wrapper mit overflow: hidden, wenn der Inhalt gemeinsam beschnitten werden soll. Enthält er interaktive Bedienelemente, dürfen deren Tastatur-Fokusmarkierungen nicht verschwinden.

Kann ich einen Kreis erstellen, ohne Bildteile abzuschneiden?

Ein Kreis kann den gesamten Rahmen eines Rechteckfotos nicht füllen, ohne Fläche zu verlieren oder die Komposition zu ändern. Soll alles erhalten bleiben, platziere das Foto mit genügend Freiraum in einem größeren quadratischen Entwurf und prüfe die Kreisgrenze. Für detailreiche Inhalte ist ein Rechteck oft besser.

Laden abgerundete Bilder schneller?

Die Form allein garantiert keinen kleineren Download. Prüfe Abmessungen und Formate wie oben und miss die Datei, die die veröffentlichte Seite tatsächlich liefert.

Zusammenfassen mitChatGPT (öffnet sich in einem neuen Tab)Grok (öffnet sich in einem neuen Tab)Google (öffnet sich in einem neuen Tab)Perplexity (öffnet sich in einem neuen Tab)Claude (öffnet sich in einem neuen Tab)