CSS Border-Radius-Generator

Die border-radius-Kurzschreibweise verstehen

Die CSS-Eigenschaft border-radius ist im W3C-Modul CSS Backgrounds and Borders Level 3 definiert. Ihre Kurzschreibweise akzeptiert bis zu vier Werte für kreisförmige Ecken und bis zu acht (durch einen Schrägstrich getrennt) für elliptische Ecken. Die Eckenreihenfolge ist festgelegt: oben links, oben rechts, unten rechts, unten links, im Uhrzeigersinn von oben links, genau so, wie man ein Zifferblatt liest. Die Spezifikation ist eindeutig: „Wird unten links weggelassen, entspricht es oben rechts. Wird unten rechts weggelassen, entspricht es oben links. Wird oben rechts weggelassen, entspricht es oben links.“

Mit den vier eckenweisen Langformen können Sie eine einzelne Ecke ansprechen, ohne die anderen zu schreiben: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Jede akzeptiert einen Wert (eine kreisförmige Ecke) oder zwei Werte (ein elliptisches x y).

Pixel, Prozentwerte und der 50-%-Trick

Die W3C-Spezifikation legt fest, wie Prozentwerte aufgelöst werden: „Prozentwerte für den horizontalen Radius beziehen sich auf die Breite der Border-Box, während sich Prozentwerte für den vertikalen Radius auf die Höhe der Border-Box beziehen.“ Das hat eine wichtige Folge: border-radius: 50% erzeugt nur dann einen perfekten Kreis, wenn das Element quadratisch ist. Bei einem 200×100-Rechteck erzeugt 50 % an jeder Ecke eine Ellipse: 100px horizontaler Radius (die halbe Breite) und 50px vertikaler Radius (die halbe Höhe).

Wann welche Einheit zu verwenden ist:

• Pixel (px): Präzise, feste Ecken, die nicht mit dem Element skalieren. Am besten für Schaltflächen, Karten und konsistente UI-Komponenten.
• Prozentwerte (%): Skalieren mit dem Element. Verwenden Sie 50 % für Kreise oder Ellipsen auf formverändernden Komponenten.
• em / rem: Skalieren mit der Schriftgröße. Nützlich für Schaltflächen, deren Eckenradius mit dem darin enthaltenen Text wachsen soll.
• calc(): Einheiten mischen, z. B. calc(8px + 0.5em) für eine Basis, die dezent mit der Textgröße skaliert.

Der Pillen-Trick

Ein border-radius, der größer ist als die Hälfte der kürzesten Seite des Elements, begrenzt jede Ecke auf einen echten Halbkreis und erzeugt unabhängig von der Breite eine Pillenform. Die Konvention ist border-radius: 9999px, eine beliebige Zahl, die groß genug ist, dass kein realistisches Element sie je überschreitet. Deshalb verwendet Bootstraps .rounded-pill 50rem (~800px) und Tailwind v4s rounded-full löst sich zu calc(infinity * 1px) auf: beide kodieren dieselbe Idee, dass eine Zahl, die größer als die Box ist, auf jedem Element eine Pille garantiert.

Elliptische Ecken und organische Blob-Formen

Die Form mit acht Werten (mit Schrägstrich) verwenden Designer, um organische, asymmetrische „Blob“-Formen zu erzeugen, die für Hero-Illustrationen und dekorative Hintergründe beliebt geworden sind. Jede Ecke erhält einen anderen horizontalen Radius vor dem Schrägstrich und einen anderen vertikalen Radius danach, wodurch Kurven entstehen, die nicht auf Kreisbögen beschränkt sind.

/* Asymmetric blob */
.blob {
  width: 280px;
  height: 280px;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

Varianten mit logischen Eigenschaften für RTL-Layouts

Das Modul CSS Logical Properties Level 1 führt vier logische Langformen ein, die sich an die Schreibrichtung anpassen:

• border-start-start-radius: oben links bei LTR-Englisch, oben rechts bei RTL-Arabisch / -Hebräisch.
• border-start-end-radius: oben rechts bei LTR, oben links bei RTL.
• border-end-start-radius: unten links bei LTR, unten rechts bei RTL.
• border-end-end-radius: unten rechts bei LTR, unten links bei RTL.

Nützlich, wenn dieselbe Komponente in beiden Leserichtungen symmetrisch aussehen muss: Die „Mund“-Ecke einer Sprechblase sollte beispielsweise immer auf der Seite des Sprechers sein, nicht immer links. Beachten Sie, dass es noch keine Kurzschreibweise für logische Eigenschaften gibt, sodass Sie alle vier Langformen einzeln schreiben müssen, um RTL-bewusste Ecken zu aktivieren.

Äußere vs. innere Kante bei dickem Rahmen

Der Radius gilt für die äußere Kante des Rahmens. Der Browser berechnet automatisch einen kleineren, konzentrischen Radius für die innere Kante, damit der Rahmen an der Ecke nicht unterbrochen wirkt. Praktische Folge: Ein äußerer Radius von 16px mit einem 2px-Rahmen hat einen inneren Radius von etwa 14px, sodass der Rahmen rundum wie ein Rahmen gleichbleibender Dicke aussieht. Setzen Sie background-clip: padding-box, wenn die Hintergrundfarbe an der inneren Kante des Rahmens enden soll, statt darunter durchzuscheinen.

Praktische Größenkonventionen

Häufige Fehler

1. 50 % auf einem nicht quadratischen Element verwenden und einen Kreis erwarten. 50 % auf einem Rechteck ergeben eine Ellipse. Halten Sie das Element entweder quadratisch oder verwenden Sie border-radius: 9999px für eine echte Pille.
2. Die Eckenreihenfolge vergessen. Die Kurzschreibweise verläuft im Uhrzeigersinn von oben links (OL OR UR UL). Die Form mit zwei Werten setzt diagonal gegenüberliegende Paare, was man sich leicht falsch merkt.
3. Negative Werte. Die Spezifikation definiert sie als ungültig; der Browser begrenzt sie stillschweigend auf null. Wenn eine Ecke nicht wie erwartet abrundet, prüfen Sie, ob Sie nicht versehentlich subtrahiert haben.
4. Abgerundete Elternelemente, durch die Kinder durchscheinen. Ein Element mit border-radius beschneidet seine Nachkommen standardmäßig nicht. Fügen Sie overflow: hidden am Elternelement hinzu, wenn die Kinder an der abgerundeten Kante enden sollen.
5. Eckenweise Eigenschaften vor der Kurzschreibweise. Die CSS-Kaskade ist reihenfolgeabhängig, daher überschreibt border-top-left-radius gefolgt von border-radius den eckenweisen Wert. Stellen Sie die Kurzschreibweise zuerst, dann die eckenweisen Überschreibungen.
6. % und px ungeschickt mischen. Einen Radius von 50 % an einer Ecke und 12px an einer anderen zu setzen, ergibt selten, was Designer erwarten. Bleiben Sie bei einer Einheit pro Element.
7. Tabellen und border-collapse: collapse. Die MDN-Referenz ist eindeutig: border-radius gilt nicht für table- oder inline-table-Elemente, wenn Rahmen zusammengeführt werden. Wechseln Sie entweder zu border-collapse: separate oder wenden Sie den Radius auf ein umschließendes Element an.

Weitere häufig gestellte Fragen

Warum bekommt mein Bild keine abgerundeten Ecken?

Wenn sich das Bild in einem Container mit border-radius befindet, die Ecken aber immer noch eckig aussehen, beschneidet das Elternelement nicht. Fügen Sie dem Elternelement overflow: hidden hinzu. Alternativ wenden Sie border-radius direkt auf das <img>-Element an; Bilder reagieren nativ auf die Eigenschaft.

Beeinflusst border-radius die Leistung?

Vernachlässigbar. Moderne Browser rendern abgerundete Ecken auf der GPU, und die Kosten sind im Wesentlichen identisch mit einer eckigen Kante. Die Ausnahme ist das Animieren von border-radius auf einem großen Element in jedem Frame (es kann ein erneutes Compositing der Ebenen auslösen), aber statische abgerundete Ecken sind praktisch kostenlos.

Funktioniert das in älteren Browsern?

Ja. Jeder Browser seit IE9 unterstützt border-radius ohne Präfix. Die Varianten mit logischen Eigenschaften (border-start-start-radius usw.) sind neuer: Chrome 89+, Firefox 66+, Safari 15+. Für ältere Browser, die logisches Verhalten benötigen, schreiben Sie einen kleinen @supports-Block als Fallback.

Wie erstelle ich eine Sprechblase?

Verwenden Sie die vier eckenweisen Langformen, um drei Ecken abzurunden und die vierte klein oder scharf zu lassen. Das ist der „Mund“, der auf den Sprecher zeigt. Zum Beispiel eine Blase für eine ausgehende Nachricht: border-radius: 16px 16px 4px 16px;. Für RTL-bewusste Blasen wechseln Sie zu logischen Langformen, damit der Mund mit der Leserichtung umklappt.

Warum sehen meine Pillen-Schaltflächen bei unterschiedlichen Elementbreiten ungleichmäßig aus?

Eine Pille begrenzt jede Ecke auf die Hälfte der kürzesten Seite, was bei einer typischen Schaltfläche die Höhe ist. Kürzere Schaltflächen erhalten also kleinere Radien und höhere größere. Das ist das gewünschte Verhalten. Wenn Sie auf jeder Schaltfläche unabhängig von der Größe einen konstanten Radius möchten, verwenden Sie einen festen Pixelwert (z. B. border-radius: 24px) statt des Pillen-Tricks.

Kann ich das CSS direkt in Tailwind- / Bootstrap-Projekte kopieren?

Ja, das generierte CSS ist einfache Standardsyntax ohne Präprozessor- oder Framework-Abhängigkeiten. In Tailwind v4 können Sie beliebige Werte auch als Utilities schreiben (rounded-[12px] oder rounded-[30%/70%]), wenn Sie lieber im Utility-Klassen-Stil bleiben.