Border-Radius-Generator

Ein Pixel-Radius ist fest: border-radius: 16px rundet jede Ecke um genau 16 Pixel ab, egal wie groß das Element ist. Ein Prozent-Radius ist relativ — er bezieht sich auf die eigene Breite und Höhe des Elements, sodass die Ecken mitwachsen oder mitschrumpfen. Dieser Unterschied wirkt sich direkt auf die Form aus. Ein Wert nahe 50 % biegt die Ecken so weit, dass sie sich treffen, und macht aus einem Quadrat einen Kreis oder aus einem Rechteck eine Ellipse — deshalb verwenden Avatare und runde Buttons 50 % statt eines festen Pixelwerts. Pixel sorgen für eine gleichbleibende, vorhersagbare Weichheit über unterschiedlich große Cards und Eingabefelder hinweg; Prozentwerte erzeugen flexible Formen, die sich anpassen. Dieser Generator lässt dich die Einheit pro Design wechseln (px bis 200, % bis 50) und zeigt das Live-Ergebnis, sodass du genau siehst, welches Verhalten du willst, bevor du kopierst.

Für einen Kreis gibst du einem gleichseitigen (quadratischen) Element border-radius: 50%. Der Prozentwert rundet jede Ecke relativ zur Box, und bei 50 % treffen sich die vier Bögen zu einem vollständigen Kreis — die Standardtechnik für runde Avatare und Icon-Buttons. Für eine Pillenform funktioniert es anders: Du wendest einen sehr großen Pixelwert wie 9999px auf ein Element an, das breiter als hoch ist. Der Radius wird auf die Hälfte der kürzeren Seite begrenzt, sodass beide Enden zu vollständig abgerundeten Halbkreisen werden, während die gerade Mitte flach bleibt — der klassische Tag- oder Toggle-Look. Bleibt das Element quadratisch, entsteht wieder ein Kreis. Dieses Tool enthält fertige Presets für Kreis und Pille sowie eine Live-Vorschau, damit du prüfen kannst, ob die Form bei deiner tatsächlichen Elementgröße hält, bevor du den Code einfügst.

Die Standard-border-radius vergibt jeder Ecke einen einzigen Rundungswert. Die Acht-Werte-Form teilt jede Ecke in einen horizontalen und einen vertikalen Radius auf, getrennt durch einen Schrägstrich: Die Werte vor dem Schrägstrich legen die horizontalen Radien fest, die danach die vertikalen. Unterscheiden sich horizontaler und vertikaler Radius einer Ecke, wird der Bogen zu einer asymmetrischen, eiförmigen Kurve statt eines sauberen Viertelkreises. Kombiniert man vier ungleiche Ecken, wirkt die Kontur weich und unregelmäßig — die organischen „Blob"-, Squircle- oder Pebble-Formen, die in modernen UI-Hintergründen und dekorativen Elementen beliebt sind. Von Hand sind diese kaum zu treffen, weil acht Zahlen gleichzeitig zusammenspielen. Dieser Generator macht alle acht Werte zugänglich, liefert organische Presets wie Squircle, Pebble und Welle auf Basis dieser Syntax und rendert das Ergebnis live, sodass du einen einzelnen Radius verschieben und die Silhouette sofort verändern siehst.

Teilen sich alle vier Ecken denselben Pixelwert, prüft der Generator, ob dieser Wert zur Standard-Radiusskala von Tailwind passt. Ist das der Fall, erhältst du die eingebaute Utility-Klasse — ein kleiner Radius wird zum Beispiel zu rounded-md, ein sehr großer Wert zu rounded-full für Kreise und Pillen. Passt der Wert zu keiner vordefinierten Stufe, greift das Tool auf Tailwinds Syntax für beliebige Werte zurück und erzeugt eine Klasse wie rounded-[18px], die die exakte Zahl fest einbaut. Unterschiedliche Ecken werden genauso behandelt, gemappt auf passende Pro-Ecke-Utilities oder beliebige Werte. Das erspart dir, die Skala auswendig zu lernen oder zu raten, welche benannte Klasse welchem Pixelwert entspricht. Neben Tailwind kannst du reines CSS-Shorthand, ein styled-components-Template oder CSS Custom Properties kopieren — wähle das Format deines Projekts und füge es direkt ein.

em und rem sind schriftgrößenrelative Einheiten, keine absoluten. Ein rem entspricht der Root-Schriftgröße, ein em der Schriftgröße des aktuellen Elements; in einem typischen Setup entsprechen beide 16 Pixeln. border-radius: 1rem ergibt also etwa einen 16px-Radius, und 2rem sind rund 32px — deutlich runder als border-radius: 2px. Der Vorteil ist Skalierbarkeit: Erhöht ein Nutzer oder dein Designsystem die Basis-Schriftgröße, wachsen in em oder rem definierte Radien proportional mit und bleiben visuell im Gleichgewicht mit dem Text, während Pixel-Radien starr bleiben. Nutze rem, wenn Ecken deiner typografischen Skala im gesamten Theme folgen sollen, und em, wenn sie an die Schriftgröße einer einzelnen Komponente gebunden sein sollen. Dieser Generator berechnet em und rem in der Vorschau gegen eine Basis von 16px, sodass die angezeigte Rundung dem entspricht, was ausgeliefert wird, und du die Einheit jederzeit zum Vergleich wechseln kannst.