CSS-Border-Radius-Generator
Gestalten Sie CSS-border-radius visuell — steuern Sie alle vier Ecken einzeln oder gemeinsam. Die Live-Vorschau zeigt sofort das Ergebnis.
Funktionen
Anleitung
1. Den Radius-Regler ziehen — die neutrale Karte zeigt die Ecken in Originalgröße.
2. Auf „Pro Ecke“ umschalten, um jede Ecke einzeln zu formen.
3. Das CSS kopieren — es nutzt die kürzeste gültige Schreibweise.
Über dieses Werkzeug
Abgerundete Ecken sind eine Zeile CSS, doch den richtigen Wert trifft man leichter, wenn man ihn sieht. Dieser Generator zeigt border-radius in Originalgröße auf einer neutralen Karte, während Sie einen einzelnen Schieberegler ziehen oder jede Ecke einzeln formen. Anschließend schreibt er die kürzeste gültige Deklaration: einen Wert, wenn alle Ecken gleich sind, und zwei, drei oder vier Werte, wenn sie sich unterscheiden – in der Reihenfolge oben links, oben rechts, unten rechts, unten links. Kleine Radien von 4–8 px passen zu Buttons und Eingabefeldern, 12–24 px wirken auf Karten freundlich, und sehr große Werte machen flache Elemente zu Pillen. Wechseln Sie den Hintergrund der Bühne, um zu sehen, wie die Form auf hellen und dunklen Flächen wirkt, bevor Sie das CSS in Ihr Stylesheet kopieren.