Abgerundete Ecken sind eines der praegendsten Merkmale moderner Oberflaechen. Sie wirken freundlicher und weniger technisch als harte Kanten. In CSS steuert die Eigenschaft border-radius diese Rundung – und kann weit mehr als nur „alle Ecken ein bisschen runder machen“. Dieser Artikel zeigt, wie die Werte zusammenspielen und welche Formen damit moeglich sind.
Die Kurzschreibweise verstehen
Im einfachsten Fall gibst du einen Wert an: border-radius: 12px; rundet alle vier Ecken gleich. Wie bei margin oder padding kannst du aber auch mehrere Werte angeben, die im Uhrzeigersinn ab oben links gelten:
- Ein Wert: gilt fuer alle vier Ecken.
- Zwei Werte: der erste fuer oben-links und unten-rechts, der zweite fuer oben-rechts und unten-links.
- Vier Werte: oben-links, oben-rechts, unten-rechts, unten-links – jede Ecke einzeln.
Genau diese Eckenkontrolle bildet der Border Radius Generator ab: Du stellst fuer jede der vier Ecken einen eigenen Wert ein, siehst die Vorschau und kopierst die fertige border-radius-Zeile direkt heraus.
Pixel oder Prozent?
Der Wert kann eine feste Einheit (px, rem) oder ein Prozentsatz sein – und der Unterschied ist wichtig:
- Feste Einheiten ergeben eine immer gleich grosse Rundung, unabhaengig von der Elementgroesse. Gut fuer Karten und Buttons, die einen einheitlichen Look behalten sollen.
- Prozent beziehen sich auf die Seitenlaengen des Elements.
border-radius: 50%verwandelt ein Quadrat in einen perfekten Kreis und ein Rechteck in eine Ellipse.
Zwei nuetzliche Standardformen
Zwei Muster begegnen dir staendig:
- Pill-Button: Ein sehr grosser Radius wie
border-radius: 9999pxrundet die kurzen Seiten zu Halbkreisen. So entsteht die typische Tabletten-Form, egal wie breit der Button ist. - Kreis-Avatar: Ein quadratisches Bild mit
border-radius: 50%wird zum runden Profilbild – ohne das Bild selbst zuschneiden zu muessen.
Die Acht-Werte-Syntax fuer organische Formen
Wenig bekannt: border-radius kann pro Ecke zwei Radien aufnehmen, getrennt durch einen Schraegstrich – der erste Block fuer die horizontalen, der zweite fuer die vertikalen Radien. Damit werden die Ecken elliptisch statt kreisrund. Spielt man mit diesen acht Werten, entstehen die weichen, leicht unregelmaessigen „Blob“-Formen, die man aus modernen Illustrationen kennt. Das wirkt lebendiger als jede symmetrische Rundung.
Stolperfallen im Alltag
Ein praktischer Hinweis: Hat ein Element einen sichtbaren Rahmen oder Schatten, muss der Radius gross genug sein, damit die Rundung nicht abgehackt aussieht. Und bei verschachtelten, gerundeten Boxen sollte der innere Radius etwas kleiner sein als der aeussere, sonst entsteht ein optischer Versatz an den Ecken.
Runde Ecken und Schatten gehoeren oft zusammen – den passenden Schatten erzeugst du mit dem Box Shadow Generator. Brauchst du Abstaende, die sich mit der Viewport-Groesse mitskalieren, hilft der CSS Clamp Generator. Die ganze Sammlung findest du unter kotsch.tech/webtools.
Fazit
border-radius reicht von der simplen Rundung aller Ecken bis zur freien Blob-Form ueber acht Einzelwerte. Wer die Kurzschreibweise und den Unterschied zwischen Pixel und Prozent kennt, baut Pillen, Kreise und Karten ohne Raterei. Den exakten Code stellst du am schnellsten visuell zusammen und uebernimmst ihn fertig.