CSS-Border-Radius-Generator
border-radius visuell einstellen: alle Ecken gemeinsam oder einzeln, auch elliptisch – mit fertigem CSS und Tailwind-Klasse.
Der CSS-Border-Radius-Generator stellt abgerundete Ecken visuell ein. Du kannst alle vier Ecken gemeinsam oder einzeln verändern, zwischen px und Prozent wählen und mit elliptischen Radien organische Formen wie Blobs erzeugen. Der fertige border-radius-Code und die passende Tailwind-Klasse stehen sofort zum Kopieren bereit.
border-radius: 24px;Was macht border-radius?
Mit border-radius rundest du die Ecken eines Elements ab. Ein Wert wirkt auf alle vier
Ecken, mehrere Werte steuern sie einzeln. Auch Bilder, Buttons, Karten und Eingabefelder erhalten
so ihren Charakter: eckig wirkt technisch, stark gerundet freundlich.
Schreibweisen im Überblick
| Schreibweise | Bedeutung |
|---|---|
border-radius: 12px | Alle Ecken gleich |
border-radius: 12px 0 | Oben links und unten rechts 12 px, sonst 0 |
border-radius: 50% | Kreis bei Quadrat, Ellipse bei Rechteck |
border-radius: 10px / 40px | Elliptisch: horizontal 10 px, vertikal 40 px |
So gehst du vor
- Vorlage wählen oder Regler bewegen.
- Einheit und Verknüpfung der Ecken festlegen.
- Code kopieren. Passende Schatten baust du im Box-Shadow-Generator, komplette Buttons im Button-Generator.
Beispiel
Für eine Karte mit sanft gerundeten Ecken reichen 16px, in Tailwind rounded-2xl. Für ein organisches Hintergrundelement nimmst du die Vorlage „Blob“
mit 60% 40% 30% 70% / 60% 30% 70% 40%. Andere Formen entstehen mit dem Clip-Path-Generator.
Häufige Fragen
In welcher Reihenfolge stehen die Werte bei border-radius?
Im Uhrzeigersinn, beginnend oben links: oben links, oben rechts, unten rechts, unten links. Zwei Werte gelten für diagonal gegenüberliegende Ecken, drei Werte für oben links, oben rechts und unten links sowie unten rechts.
Wie entsteht eine Pillenform?
Mit einem sehr großen Radius, zum Beispiel border-radius: 9999px. Der Browser begrenzt ihn automatisch auf die halbe Höhe. In Tailwind ist das die Klasse rounded-full.
Was bedeutet der Schrägstrich in border-radius?
Vor dem Schrägstrich stehen die horizontalen, danach die vertikalen Radien. So entstehen elliptische Ecken statt Viertelkreisen, etwa 60% 40% 30% 70% / 60% 30% 70% 40% für einen Blob.
px oder Prozent?
px bleibt bei jeder Elementgröße gleich rund. Prozent orientiert sich an Breite und Höhe, 50 % auf einem Quadrat ergibt einen Kreis, auf einem Rechteck eine Ellipse.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.