border-radius: Das Fundament verstehen
Die CSS-Eigenschaft border-radius rundet die Ecken eines HTML-Elements ab – und das gilt für jedes Element, nicht nur Bilder. Hinter der kompakten Shorthand-Schreibweise stecken eigentlich vier separate Eigenschaften, die sich unabhängig voneinander steuern lassen:
/* Alle vier Ecken identisch */
border-radius: 20px;
/* Oben-links | Oben-rechts | Unten-rechts | Unten-links */
border-radius: 10px 20px 30px 10px;
/* Horizontaler Radius / Vertikaler Radius – für Ellipsen */
border-radius: 50% / 30%;
/* Die Langform – jede Ecke einzeln */
border-top-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 10px;
Der Wert kann als Pixel (absolute Größe), als Prozent (relativ zur Elementgröße) oder als em/rem (relativ zur Schriftgröße) angegeben werden. Für runde Bilder ist der Prozentwert fast immer die beste Wahl – er skaliert automatisch mit dem Element mit.
Wichtig: border-radius wirkt nur sichtbar, wenn das Element einen sichtbaren Hintergrund, einen Rahmen oder – bei Bildern – overflow: hidden am umgebenden Container hat. Bilder im direkten <img>-Tag benötigen das border-radius direkt auf dem Tag selbst.
Perfekter Kreis: border-radius 50% richtig einsetzen
Die berühmteste Anwendung von border-radius ist der perfekte Kreis. Die Formel ist denkbar simpel – aber sie hat eine entscheidende Voraussetzung:
/* Das Bild selbst – direkter Weg */
img.profilbild {
width: 120px;
height: 120px; /* MUSS identisch mit width sein */
border-radius: 50%;
object-fit: cover; /* Bild ausfüllen ohne Verzerrung */
}
/* Empfohlen: Container-Methode für mehr Kontrolle */
.avatar-wrap {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden; /* Bild am Rahmen abschneiden */
flex-shrink: 0; /* In Flex-Layouts nicht verkleinern */
}
.avatar-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block; /* Kein Whitespace unter dem Bild */
}
Das object-fit: cover ist entscheidend: Es stellt sicher, dass das Bild den verfügbaren Raum vollständig füllt, ohne verzerrt zu werden. Der Fokuspunkt liegt standardmäßig in der Bildmitte – mit object-position lässt sich das anpassen, z.B. auf object-position: top center für Porträtfotos, bei denen der Kopf oben sein soll.
Wenn width und height nicht identisch sind, entsteht aus border-radius: 50% keine perfekte Ellipse – was bei bewusstem Einsatz ebenfalls ein schöner Effekt sein kann. Für einen garantierten Kreis müssen die Maße quadratisch sein.
Alle Formen im Live-Überblick
border-radius kann weit mehr als nur Kreise. Hier siehst du vier klassische Anwendungsfälle direkt am echten Beispielbild:
Perfekter Kreis
border-radius: 50%
Weiche Ecken
border-radius: 20px
Tropfen-Form
border-radius: 50% 50% 50% 0 + rotate(-45deg)
Pill / Oval
border-radius: 999px
Die Demo-Bilder zeigen: border-radius verändert immer nur den sichtbaren Bereich des Elements, nicht das Bild selbst. Das Original bleibt unangetastet – es wird lediglich per CSS beschnitten. Ein großer Vorteil gegenüber dateibasiertem Zuschneiden.
Die wichtigsten border-radius Varianten
| Form | CSS-Code | Wann einsetzen |
|---|---|---|
| Kreis | border-radius: 50% |
Profilbilder, Avatare, Team-Fotos |
| Abgerundetes Rechteck | border-radius: 12px |
Produkt-Cards, Blog-Thumbnails, allgemeine Bilder |
| Pill | border-radius: 999px |
Querformatige Banner, Badges, Tags |
| Tropfen | border-radius: 50% 50% 50% 0; transform: rotate(-45deg) |
Map-Marker-Effekte, dekorative Porträts |
| Halbkreis oben | border-radius: 200px 200px 0 0 |
Hero-Bilder, Portrait-Ausschnitte in Karten |
| Ellipse | border-radius: 50% / 30% |
Dekorative Bildrahmen, stilisierte Thumbnails |
| Diagonale Ecke | border-radius: 0 50px 0 50px |
Dynamische, eckige Designelemente |
/* Halbkreis – nur obere Ecken runden */
.img-half-circle {
border-radius: 200px 200px 0 0;
}
/* Diagonale Ecken */
.img-diagonal {
border-radius: 0 40px 0 40px;
}
/* Ellipse – horizontal und vertikal unterschiedlich */
.img-ellipse {
border-radius: 50% / 30%;
}
clip-path: Wenn border-radius nicht reicht
border-radius ist mächtig – aber auf Ellipsen und abgerundete Rechtecke beschränkt. Für Sechsecke, Dreiecke, Sterne oder beliebige Polygone kommt CSS clip-path ins Spiel. Die Browser-Unterstützung ist heute ausgezeichnet (über 96 %).
/* Kreis – äquivalent zu border-radius: 50% */
.img-clip-circle {
clip-path: circle(50%);
}
/* Ellipse */
.img-clip-ellipse {
clip-path: ellipse(55% 40% at 50% 50%);
}
/* Sechseck */
.img-hexagon {
clip-path: polygon(
50% 0%, 100% 25%, 100% 75%,
50% 100%, 0% 75%, 0% 25%
);
}
/* Raute */
.img-diamond {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/* Unregelmäßiges Polygon – kreativ */
.img-custom {
clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 0 100%);
}
border-radius vs. clip-path – Was passt wann?
- border-radius – einfache Kreise, Ovale, abgerundete Rechtecke; gut animierbar; Box-Shadow funktioniert normal
- clip-path – Sechsecke, Dreiecke, Polygone, komplexe Kurven; Box-Shadow wird abgeschnitten (nutze stattdessen
filter: drop-shadow()); ebenfalls gut animierbar - clip-path: path() – SVG-Pfade direkt in CSS; für organische, unregelmäßige Formen; Browserunterstützung etwas eingeschränkter
Ein wichtiger Unterschied: Bei clip-path wird der beschnittene Bereich für Mausereignisse transparent – Klicks auf die abgeschnittene Fläche registriert das Element nicht mehr. Bei border-radius mit overflow: hidden bleibt das Klick-Rechteck erhalten. Das kann je nach Anwendungsfall Vor- oder Nachteil sein.
Responsive runde Bilder – der richtige Container-Trick
Das größte Problem bei runden Bildern tritt auf, wenn die Seite auf kleinen Bildschirmen responsiv werden soll: Ein quadratisches Bild mit fester Pixelgröße passt sich nicht automatisch an. Die Lösung liegt im Container.
Methode 1: aspect-ratio (modern, empfohlen)
.avatar-responsive {
width: 100%; /* Passt sich an den Eltern-Container an */
max-width: 200px; /* Wächst nicht über 200px */
aspect-ratio: 1 / 1; /* Erzwingt quadratisches Seitenverhältnis */
border-radius: 50%;
overflow: hidden;
}
.avatar-responsive img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
Methode 2: Padding-Trick (maximale Browser-Kompatibilität)
.avatar-responsive-fallback {
width: 25%; /* Relative Breite */
max-width: 200px;
position: relative;
}
/* Padding-bottom erzeugt die Höhe = gleiche Höhe wie Breite */
.avatar-responsive-fallback::before {
content: '';
display: block;
padding-bottom: 100%; /* 100% = quadratisch */
}
.avatar-responsive-fallback img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
aspect-ratio hat heute eine Browser-Unterstützung von über 96 % und ist die sauberere, lesbarere Lösung. Den Padding-Trick brauchst du nur noch, wenn du sehr alte Browser unterstützen musst.
Alt-Text & Barrierefreiheit bei gestalteten Bildern
Runde Bilder sind ein rein visueller Effekt – für Screenreader und Suchmaschinen ändert sich nichts am Bild selbst. Die CSS-Gestaltung hat keinen Einfluss auf die Zugänglichkeit. Trotzdem gibt es einige Punkte, die du im Blick behalten solltest:
- Alt-Text immer schreiben – auch bei Profilbildern. Statt leerem alt="" lieber beschreibend:
alt="Anna Müller, Head of Marketing bei Beispiel GmbH" - Ausreichender Kontrast – falls du Border oder Ringe um Bilder legst (z.B. als Avatar-Rahmen), muss der Kontrast zum Hintergrund WCAG-konform sein
- Dekorative Bilder – rein dekorative, bedeutungslose Bilder erhalten
alt=""und optionalesrole="presentation", damit Screenreader sie überspringen - Focus-Styles – wenn ein Bild klickbar ist, muss der Fokus-Rahmen auch bei border-radius sichtbar bleiben
Ob deine Website die Barrierefreiheitsanforderungen erfüllt – besonders relevant seit dem BFSG (Barrierefreiheitsstärkungsgesetz) – kannst du kostenlos prüfen:
Performance: Was border-radius kostet (und was nicht)
Eine verbreitete Sorge: Verlangsamt border-radius die Seite? Die Antwort ist differenziert. In der Vergangenheit konnte das Rendern von gerundeten Ecken – besonders in Verbindung mit Animationen – zu Performance-Problemen bei den Core Web Vitals führen. 2026 ist das für statische, nicht-animierte Bilder kein relevantes Thema mehr.
Was wirklich Performance kostet:
- border-radius + box-shadow + Animation – die Kombination zwingt den Browser zu teuren Paint-Operationen auf jedem Frame
- Viele animierte runde Bilder – z.B. rotierende Avatar-Kacheln – können INP und CLS belasten
- Backdrop-filter + border-radius – Glasmorphismus-Effekte sind GPU-intensiv; sparsam einsetzen
- Statisches border-radius – kein messbarer Performance-Einfluss; kostet so gut wie nichts
- will-change: transform – bei animierten runden Elementen auf eine eigene Compositing-Ebene verschieben
- clip-path animieren – performanter als border-radius animieren, da clip-path auf der GPU läuft
Für die Professionelle Website-Erstellung gilt: Statische runde Bilder haben null Einfluss auf PageSpeed oder Core Web Vitals. Der Performancehebel liegt beim Bildformat (WebP/AVIF), der Dateigröße und dem richtigen Einsatz von Lazy Loading – nicht beim border-radius.
Häufige Fragen zu CSS-Bildformen
border-radius: 50% an einem quadratischen Bild. Width und Height müssen identisch sein. Für nicht-quadratische Bilder nutze einen quadratischen Container mit overflow: hidden und border-radius: 50% – das Bild darin erhält width: 100%; height: 100%; object-fit: cover.border-radius: 50% die semantisch klare und universelle Wahl.clip-path: polygon(...). Für organische, kurvenreiche Formen steht clip-path: path() mit SVG-Syntax zur Verfügung.filter: drop-shadow().aspect-ratio: 1 / 1 am Container plus width: 100% und max-width nach Bedarf. Das Bild darin erhält object-fit: cover und border-radius: 50%. Alternativ funktioniert der Padding-Bottom-Trick (padding-bottom: 100% + position: absolute) für ältere Browser-Kompatibilität.