Border-Radius-Generator

Ecken mit mehr Kontrolle formen

Der Eckenradius ist eine der schnellsten Möglichkeiten, den Charakter einer Oberfläche zu verändern. Kleine Werte wirken präzise und strukturiert, mittlere Werte machen Karten und Buttons freundlicher, und große Werte erzeugen Pillenformen, organische Formen oder verspielte Illustrationsflächen. Dieser Border-Radius-Generator stellt die vollständige CSS-Syntax bereit, sodass Sie sowohl gewöhnliche abgerundete Rechtecke als auch elliptische Ecken gestalten können, ohne die Schrägstrich-Notation von Hand zu schreiben.

Jede Ecke hat einen horizontalen und einen vertikalen Radius. Sind beide Werte gleich, ist die Ecke kreisförmig, und das CSS sieht aus wie die vertraute border-radius-Deklaration mit vier Werten. Unterscheiden sich X und Y, wird die Ecke elliptisch, und CSS schreibt zuerst die horizontalen Werte, dann einen Schrägstrich und danach die vertikalen Werte. Die Live-Vorschau macht diesen Zusammenhang deutlich, weil sich die Form sofort ändert, sobald Sie einen Regler bewegen.

Wann elliptische Radien sinnvoll sind

Elliptische Ecken sind hilfreich, wenn Sie etwas Organischeres als eine einfache Karte wünschen, aber weiterhin schlankes und responsives CSS brauchen. Sie können Avatare, Hervorhebungen, Gutschein-Formen, Bildmasken und dekorative Flächen weniger austauschbar wirken lassen. Asymmetrische Ecken erzeugen außerdem eine visuelle Richtung und lenken den Blick auf eine Überschrift oder einen Call-to-Action. Nutzen Sie das Blob-Preset als Ausgangspunkt und verringern Sie die stärksten Werte, falls die Form vom Inhalt ablenkt.

Radiuswerte konsistent einsetzen

In produktiven Designsystemen empfiehlt es sich, einen kleinen Satz Standardradien für alltägliche Komponenten zu pflegen und individuelle Werte nur dort einzusetzen, wo die Form einen klaren Zweck erfüllt. Button, Eingabefeld und Karte wirken meist stimmiger, wenn sie verwandte Eckengrößen teilen. Dekorative Bereiche dürfen ausdrucksstärker sein, sollten aber bei unterschiedlichen Breiten gut funktionieren. Testen Sie das kopierte CSS anschließend an der echten Elementgröße, denn ein Radius, der auf der Vorschaukarte ausgewogen aussieht, kann bei einem kompakten Badge zu stark oder bei einem breiten Hero-Panel zu dezent wirken.