CSS-Border-Radius-Generator
Gestalte CSS border-radius visuell mit Live-Vorschau und kopiere produktionsreifen Code.
border-radius: —;
100 % privat – alles läuft in deinem Browser. Es wird nichts hochgeladen.
Über CSS-Border-Radius-Generator
Der CSS-Border-Radius-Generator gestaltet alles von sanft abgerundeten Karten bis zu organischen Blob-Formen. Ziehen Sie die Eckengriffe direkt in der Vorschau, oder legen Sie jede Ecke numerisch fest — einschließlich der vollständigen Acht-Werte-Syntax, bei der jede Ecke separate horizontale und vertikale Radien hat. Genau diese zweite Achse ermöglicht Eier, Blätter, Tropfen und Blobs.
Ein Ecken-Verknüpfen-Umschalter hält alle vier Ecken für klassisch einheitliche Rundung synchron, während das Entkoppeln jede Ecke für asymmetrische Formen freigibt. Zwölf Vorlagen — abgerundet, Pille, Kreis, Squircle, zwei Blobs, Blatt, Ei, Bogen, Tropfen, Blütenblatt und Welle — zeigen, was die Eigenschaft leisten kann, und eine Zufallsschaltfläche erzeugt endlos neue organische Formen.
Sie können die Einheit ändern, Element und Fläche passend zu Ihrem Design umfärben und entweder den reinen border-radius-Wert oder eine vollständige CSS-Regel kopieren. Das Tool ist zu 100 % clientseitig — nichts wird hochgeladen.
So verwenden Sie CSS-Border-Radius-Generator
- Ziehen Sie die Eckengriffe in der Vorschau, oder schalten Sie „Alle Ecken verknüpfen“ aus, um jede Ecke separat zu bearbeiten.
- Legen Sie horizontalen und vertikalen Radius pro Ecke für organische, blob-artige Formen fest.
- Wählen Sie Ihre Einheit und passen Sie Element- und Hintergrundfarben an, um im Kontext eine Vorschau zu sehen.
- Probieren Sie die Vorlagen — Pille, Squircle, Blob, Blatt, Tropfen und mehr — oder klicken Sie auf zufällig.
- Kopieren Sie den border-radius-Wert oder das vollständige CSS.