CSS-border-radius-Generator
Stelle die Rundung jeder Ecke mit Reglern ein und sieh das Ergebnis live. Nutze einen einzigen Radius, einen pro Ecke oder elliptische Radien für organische Formen, in px, % oder rem. Kopiere das CSS, wenn es dir gefällt.
Zu 100 % in deinem Browser verarbeitet
Ctrl + Enter ausführenCtrl + C Ergebnis kopieren
So funktioniert es
- 1Wähle den Modus: alle gleich, pro Ecke oder elliptisch.
- 2Bewege die Regler und ändere bei Bedarf die Einheit.
- 3Probiere die Schnellformen wie Pille, Kreis oder Blatt.
- 4Kopiere das erzeugte CSS und füge es in dein Stylesheet ein.
Anwendungsfälle
- Karten, Buttons und Bilder einer Oberfläche abrunden.
- Tropfen- oder organische Formen für Hintergründe und Avatare erstellen.
- Einen perfekten Kreis oder einen pillenförmigen Button gestalten.
- Verstehen, wie die Schrägstrich-Syntax von border-radius funktioniert.
Häufig gestellte Fragen
Wie erstelle ich mit border-radius einen Kreis?
Nimm 50 % bei einer quadratischen Box. Bei einer rechteckigen Box entsteht eine Ellipse; für eine Pille verwendest du einen sehr großen Radius wie 999 px.
Was bedeutet der Schrägstrich in 50% / 30%?
Er trennt die horizontalen von den vertikalen Radien. So kann jede Ecke eine Ellipse statt eines Viertelkreises sein, was organische Formen ermöglicht.
In welcher Reihenfolge stehen die Werte?
Sie beginnen oben links und laufen im Uhrzeigersinn: oben links, oben rechts, unten rechts und unten links.
Sind px, % oder rem besser?
px ergibt eine feste Rundung, % passt sich der Boxgröße an (praktisch für Kreise und Tropfen), und rem skaliert mit der Schriftgröße der Seite.