Border-Radius-Generator
Ziehen Sie die Eckgriffe, um organische Blobs mit 8 unabhängigen Radien zu formen — dann kopieren Sie den CSS- oder Tailwind-Code.
So verwenden Sie den Border-Radius-Generator
- Ziehen Sie einen der 4 Eckgriffe direkt auf der Vorschau-Box, um sie visuell zu formen.
- Feinjustieren mit den Reglern: Jede Ecke hat einen unabhängigen horizontalen und vertikalen Radius.
- Probieren Sie die Presets — Blobs, Blatt, Ei und Ticket-Formen sind einen Klick entfernt.
- Stimmen Sie Demo-Box- und Hintergrundfarben auf Ihr echtes Design ab, für eine genaue Vorschau.
- Kopieren Sie die border-radius-Deklaration aus dem CSS-Tab oder holen Sie sich die Tailwind-Klasse.
Über diesen Border-Radius-Generator
Die meisten kennen border-radius als Einzelwert — doch die Eigenschaft akzeptiert tatsächlich bis zu 8 Werte: vier horizontale und vier vertikale Radien, getrennt durch einen Schrägstrich (z. B. border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%). Diese Schrägstrich-Syntax ist das Geheimnis hinter den organischen „Blob“-Formen, die im modernen Webdesign überall sind.
Dieser Generator stellt alle 8 Werte als Regler und als ziehbare Eckgriffe bereit, damit Sie genau die gewünschte Form gestalten können, ohne die Syntax auswendig zu lernen. Wenn alle Ecken gleiche horizontale und vertikale Radien teilen, vereinfacht sich die Ausgabe automatisch zur Standard-1–4-Wert-Notation. Der generierte Code funktioniert in jedem modernen Browser, und der Tailwind-Tab erzeugt eine Arbitrary-Value-Klasse rounded-[...].
Border-Radius FAQ
Was ist die Schrägstrich-Syntax (/) in border-radius?
In border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% sind die Werte vor dem Schrägstrich die horizontalen Radien der vier Ecken (oben links, oben rechts, unten rechts, unten links) und die Werte danach ihre vertikalen Radien. Unterschiedliche horizontale und vertikale Radien erzeugen elliptische Ecken — die Grundlage organischer Blob-Formen.
Wie mache ich einen perfekten Kreis?
Stellen Sie alle Ecken auf 50 % (oder klicken Sie auf das Kreis-Preset). Bei einem quadratischen Element erzeugt border-radius: 50% einen perfekten Kreis; bei einem Rechteck eine Ellipse. Prozentwerte sind relativ zur eigenen Breite und Höhe des Elements.
Sollte ich Prozente oder Pixel für border-radius verwenden?
Prozente skalieren mit dem Element und machen Formen responsiv — ideal für Blobs. Pixel geben eine feste Eckgröße, besser für UI-Komponenten wie Buttons und Cards, bei denen man eine konsistente Rundung unabhängig von der Größe möchte. Dieser Generator verwendet Prozente, damit Ihre Formen bei jeder Größe proportional bleiben.
Warum sieht mein Blob auf einem breiten Element gequetscht aus?
Prozentuale Radien sind relativ zu den Elementmaßen — 50 % horizontal auf einer 400 px breiten Box sind 200 px, während 50 % vertikal auf einer 200 px hohen Box 100 px sind. Das ist erwartetes Verhalten: Die Form passt sich der Box an. Nutzen Sie zur Vorschau dasselbe Seitenverhältnis wie Ihr echtes Element.
Funktioniert die 8-Wert-Syntax in allen Browsern?
Ja. Die Schrägstrich-Syntax für elliptische Ecken ist Teil der CSS-Backgrounds-and-Borders-Spezifikation und wird von allen modernen Browsern (Chrome, Edge, Firefox, Safari) ohne Präfixe unterstützt.