Stimmt etwas mit diesem Tool nicht?
Über „CSS Border Radius Generator Online“
Dieses Tool unterstützt beim Festlegen von border-radius mit visueller Vorschau. Eckindividuelle Werte für asymmetrische Formen, Prozent für organische „Blobs", oder gängige Presets (Rounded, Pill, Circle).
border-radius rundet Element-Kanten. Über die einfache gleichmäßige Rundung hinaus erlauben ellipsenförmige Radien, eckspezifische Werte und asymmetrische Prozente organisch wirkende Formen für Illustration und Deko.
Funktioniert in jedem CSS-Kontext — Buttons, Karten, Bilder, Container. Ausgabe als Kurzform (border-radius: ...) oder pro Ecke.
So nutzt du dieses Tool
Einen border-radius-Wert für 4 Ecken bauen
Jede Ecke setzen
«Top-left», «Top-right», «Bottom-right», «Bottom-left» nehmen jeweils Pixel-Radius. Reihenfolge wie in der CSS-Shorthand: oben links beginnen, im Uhrzeigersinn.
Ausführen
Ergebnis: einzelnes Feld `css` — `<tl>px <tr>px <br>px <bl>px`. Direkt als Wert für `border-radius:` einsetzen. Bei vier gleichen Werten genügt eine Zahl, das Tool gibt aber immer die volle 4-Werte-Form aus.
Asymmetrische Tricks
Verschiedene Ecken ergeben typische UI-Formen: Chat-Bubble mit einer Null-Ecke (`12 12 12 0`), Tabs mit zwei Null-Unterecken, Pill-Buttons mit großem Radius links+rechts und 0 oben+unten — oder einfach ein riesiges gleiches Maß wie `9999`.
Elliptische Radien
CSS erlaubt per Ecke elliptische Radien mit `tl-x/tl-y` (`12px/24px`). Dieses Tool gibt nur kreisförmige (Einzelwert) Ecken aus — manuell anpassen, wenn elliptisch gewünscht.