Was bedeuten die acht Werte?

Vier horizontale Radien (einer pro Ecke) und vier vertikale Radien (ebenfalls einer pro Ecke). Sind horizontaler und vertikaler Radius einer Ecke gleich, ist die Ecke ein Viertelkreis. Unterscheiden sie sich, ist es ein Viertel-Ellipsensegment - und das ergibt organische Blob-Formen, Blatt-Spitzen, Ticket-Stummel und squircle-artige iOS-Icons.

Was ist ein Squircle?

Eine sanftere Annäherung an ein abgerundetes Rechteck als CSS border-radius nativ liefert - die Form der iOS-Home-Screen-Icons. In reinem CSS kommt man mit ungleichen horizontalen und vertikalen Radien am nächsten (etwa `border-radius: 30% 30% 30% 30% / 25% 25% 25% 25%`). Echte Squircles brauchen einen SVG-Pfad oder einen CSS-Houdini-Paint-Worklet - das Preset hier ist die beste CSS-Näherung.

Warum die Slash-Syntax?

Ohne Slash bekommen alle Ecken kreisförmige Radien (horizontal = vertikal). Der Slash erlaubt unterschiedliche horizontale und vertikale Radien pro Ecke - genau der Sinn asymmetrischer Formen. Alle Browser unterstützen das, und es ist der einzige Weg zu einer «Blatt»-Form (eine Ecke nahezu quadratisch, die gegenüberliegende nahezu rund).

Ja zu Prozenten - sie skalieren mit der Elementgrösse, was man für Formen will, die proportional bleiben sollen. Pixel sind vorhersehbar, brechen aber bei Grössenänderung (ein 40-px-Radius auf einem 30-px-Element wird auf die halbe Breite geklemmt und wird zum Halbkreis). Der Generator nutzt Prozente, damit die Preset-Formen das Skalieren überstehen.

Brechen grosse Radien in alten Browsern?

border-radius ist seit 2010 in allen Browsern unterstützt. Die Slash-Syntax für asymmetrische Radien seit IE 9. Die einzige moderne Falle ist Overflow: `border-radius` clippt Kindinhalte nicht, solange du nicht auch `overflow: hidden` auf demselben Element setzt - sonst quellen Bilder und absolut positionierte Kinder aus den runden Ecken heraus.

Border-Radius-Generator

Asymmetrischer Border-Radius mit 8 Eckwerten, Live-Vorschau und Form-Presets (Pille, Blob, Blatt, Ticket).

Voreinstellungen

Horizontale Radien

Oben-links

Oben-rechts

Unten-rechts

Unten-links

Vertikale Radien

Oben-links

Oben-rechts

Unten-rechts

Unten-links

CSS

border-radius: 60% 40% 30% 70% / 30% 70% 60% 40%;

Vorschau

Border-radius nimmt mehr als eine Zahl. Vollständige CSS-Form: `border-radius: oben-links oben-rechts unten-rechts unten-links / oben-links-v oben-rechts-v unten-rechts-v unten-links-v;` - acht Werte, damit jede Ecke horizontal und vertikal unterschiedlich rundet. Slider ziehen, die Vorschau formt sich live; die acht Zahlen erscheinen darunter. Presets laden die Klassiker - Pille, Blob, Blatt, Ticket, organisch - zum Feinjustieren.

So funktioniert's

Preset oder Neustart
Pille, Blob, Blatt, Ticket, organisch, Squircle - ein Klick lädt die Werte. Oder Presets überspringen und Slider ziehen.
Die acht Radien feinen
Vier horizontale, vier vertikale. Gleiche Werte pro Ecke = Kreis; ungleiche = Ellipse.
Vorschau umdimensionieren
Zwischen Quadrat, Breitrechteck und Hochrechteck wechseln, um zu prüfen, dass die Form unterschiedliche Seitenverhältnisse aushält.
CSS kopieren
Die vollständige `border-radius: a b c d / e f g h;`-Deklaration steht bereit.

Was ist das?

Ein Border-Radius-Generator baut die volle CSS-`border-radius`-Deklaration mit allen acht möglichen Werten - vier horizontale Radien (einer pro Ecke) plus vier vertikale. So lassen sich beliebige Kombinationen aus kreisförmigen und elliptischen Ecken in einer einzigen Deklaration beschreiben. Die «Blob»- und «organische Form»-Ästhetik, die im Web-Design der 2020er allgegenwärtig ist, baut auf asymmetrischen Border-Radien auf - günstig, GPU-freundlich und skalierbar, ohne je zu rastern.

Wann verwenden

Organische «Blob»-Dekorflächen für Landingpages, pillenförmige Buttons und Tags, Blatt- und Ticket-Formen für Badges und Gutscheine, asymmetrische Karten-Ecken (scharf oben-links, rund unten-rechts) für geschichtete Designs, Squircle-Annäherungen für iOS-Style-Icons und überall, wo ein simples `border-radius: 8px` zu nüchtern wirkt.

Häufige Fehler

`overflow: hidden` am Eltern-Element vergessen - Kindbilder und absolut positionierte Inhalte quellen über die runden Kanten. Pixelradien auf flexiblen Elementen - der Radius skaliert nicht mit. border-radius zusammen mit `clip-path` stapeln - beide interagieren, und meist gewinnt einer; richtiges Werkzeug wählen. Ohne Transition zwischen sehr unterschiedlichen Radien animieren - der Sprung von rund zu scharf wirkt ruckelig.

FAQ

Was bedeuten die acht Werte?: Vier horizontale Radien (einer pro Ecke) und vier vertikale Radien (ebenfalls einer pro Ecke). Sind horizontaler und vertikaler Radius einer Ecke gleich, ist die Ecke ein Viertelkreis. Unterscheiden sie sich, ist es ein Viertel-Ellipsensegment - und das ergibt organische Blob-Formen, Blatt-Spitzen, Ticket-Stummel und squircle-artige iOS-Icons.
Was ist ein Squircle?: Eine sanftere Annäherung an ein abgerundetes Rechteck als CSS border-radius nativ liefert - die Form der iOS-Home-Screen-Icons. In reinem CSS kommt man mit ungleichen horizontalen und vertikalen Radien am nächsten (etwa `border-radius: 30% 30% 30% 30% / 25% 25% 25% 25%`). Echte Squircles brauchen einen SVG-Pfad oder einen CSS-Houdini-Paint-Worklet - das Preset hier ist die beste CSS-Näherung.
Warum die Slash-Syntax?: Ohne Slash bekommen alle Ecken kreisförmige Radien (horizontal = vertikal). Der Slash erlaubt unterschiedliche horizontale und vertikale Radien pro Ecke - genau der Sinn asymmetrischer Formen. Alle Browser unterstützen das, und es ist der einzige Weg zu einer «Blatt»-Form (eine Ecke nahezu quadratisch, die gegenüberliegende nahezu rund).
Prozente oder Pixel?: Ja zu Prozenten - sie skalieren mit der Elementgrösse, was man für Formen will, die proportional bleiben sollen. Pixel sind vorhersehbar, brechen aber bei Grössenänderung (ein 40-px-Radius auf einem 30-px-Element wird auf die halbe Breite geklemmt und wird zum Halbkreis). Der Generator nutzt Prozente, damit die Preset-Formen das Skalieren überstehen.
Brechen grosse Radien in alten Browsern?: border-radius ist seit 2010 in allen Browsern unterstützt. Die Slash-Syntax für asymmetrische Radien seit IE 9. Die einzige moderne Falle ist Overflow: `border-radius` clippt Kindinhalte nicht, solange du nicht auch `overflow: hidden` auf demselben Element setzt - sonst quellen Bilder und absolut positionierte Kinder aus den runden Ecken heraus.