CSS-Border-Radius: Abgerundete Ecken, Kreise und Formen

border-radius verstehen

Die CSS-Eigenschaft border-radius rundet die Ecken der äußeren Rahmenkante eines Elements ab. Sie akzeptiert einen bis vier Werte, um jede Ecke unabhängig zu steuern – oben links, oben rechts, unten rechts und unten links. Ein einzelner Wert wendet denselben Radius auf alle vier Ecken an, während vier Werte asymmetrische Formen ermöglichen.

border-radius funktioniert mit jedem Element, das sichtbare Rahmen, Hintergründe oder Schatten besitzt. Es beschneidet sowohl den Hintergrund als auch den Rahmen auf die abgerundete Form und harmoniert dabei mit box-shadow, outline und overflow. Die Eigenschaft ist für modernes UI-Design unverzichtbar – von der dezenten Abrundung von Buttons bis hin zu komplexen organischen Formen.

Formen mit border-radius erstellen

Durch das Variieren der Radiuswerte lässt sich eine breite Palette geometrischer Formen vollständig mit CSS erzeugen. Mit dem Generator können Sie jede Ecke visuell anpassen und die entstehende Form sofort sehen.

• Pillenform – setzen Sie border-radius auf 9999px (oder 50 % bei einem breiten Element), um vollständig abgerundete Enden wie bei einem Kapsel-Button zu erzeugen. Dies ist das gängigste UI-Muster für Tags, Badges und Pillen-Buttons
• Kreis – wenden Sie border-radius: 50% auf ein quadratisches Element (gleiche Breite und Höhe) an. Der Prozentwert wird relativ zu jeder Dimension berechnet und erzeugt aus jedem Quadrat einen perfekten Kreis
• Blatt- und Blob-Formen – setzen Sie zwei gegenüberliegende Ecken auf hohe Werte und die anderen beiden auf null (z. B. border-radius: 60% 0 60% 0), um organische Blatt-, Tropfen- oder Blob-Formen zu erzeugen, die auf modernen Landingpages beliebt sind

Fortgeschrittene elliptische Ecken

Die Kurzschreibweise von border-radius unterstützt eine Slash-Syntax (/), mit der sich separate horizontale und vertikale Radien für jede Ecke definieren lassen. Dadurch entstehen elliptische (ovale) statt kreisförmige Kurven, was komplexe organische Formen ermöglicht, die ein rein kreisförmiger Radius nicht erreichen kann.

• Slash-Syntax – border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% bedeutet, dass die horizontalen Radien alle 50 % betragen, die vertikalen Radien sich jedoch unterscheiden (60 % oben, 40 % unten), was eine eiförmige Form erzeugt
• Einzelne Ecken-Eigenschaften – border-top-left-radius: 50px 30px setzt eine elliptische Ecke mit 50px horizontalem und 30px vertikalem Radius. Das bietet feinere Kontrolle als die Kurzschreibweise
• Verhalten von Prozentwerten – bei der Verwendung von Prozenten ist der horizontale Radius relativ zur Breite des Elements und der vertikale Radius relativ zu seiner Höhe. Das bedeutet, dass 50% / 50% bei einem Rechteck eine Ellipse erzeugt und keinen Kreis

Häufig gestellte Fragen

Sollte ich für border-radius Prozent- oder Pixelwerte verwenden?

Verwenden Sie Prozente, wenn der Radius mit der Größe des Elements skalieren soll (Kreise, Ellipsen, responsive Formen). Verwenden Sie Pixel für eine gleichbleibende Eckenrundung unabhängig von der Elementgröße (Button-Ecken, Karten-Ecken, Eingabefelder). Ein gängiges Muster ist border-radius: 8px für UI-Komponenten und border-radius: 50% für Avatare und kreisförmige Elemente.

Verursacht border-radius Probleme beim Subpixel-Rendering?

Auf hochauflösenden Displays können kleine border-radius-Werte (1-2px) aufgrund des Subpixel-Renderings ausgefranst wirken. Am auffälligsten ist das bei dünnen Rahmen auf kontrastarmen Hintergründen. Ein etwas größerer Radius (mindestens 3-4px) oder der Einsatz von will-change: transform kann die Renderqualität auf Retina-Bildschirmen verbessern.

Wie interagiert border-radius mit Rahmen und Outlines?

border-radius rundet die äußere Kante des Rahmens ab. Hat das Element einen dicken Rahmen, wird der innere Radius automatisch als äußerer Radius minus Rahmenbreite berechnet. Outlines folgen border-radius in den meisten Browsern nicht – sie bleiben rechteckig. box-shadow hingegen folgt der abgerundeten Form.