Border Radius Generator
Erstelle individuelle Eckenradien für deine Elemente.
border-radius: 20px;
Ecken abrunden leicht gemacht
Abgerundete Ecken sind aus dem modernen Webdesign nicht wegzudenken. Mit diesem Generator passt du jede Ecke einzeln an – von leicht abgerundet bis zu komplexen organischen Formen.
Border-Radius verstehen
Der border-radius kann für alle Ecken gleich (ein Wert) oder für jede Ecke einzeln (vier Werte) definiert werden. Für elliptische Ecken gibt es den / Operator.
Typische Werte
4-8px: Dezent abgerundet für Buttons und Inputs. 12-16px: Standard für Karten und Container. 50%: Perfekte Kreise bei quadratischen Elementen. 9999px: Pill-Shape für Buttons.
Organische Formen
Mit unterschiedlichen Werten für jede Ecke und dem / Operator für elliptische Radien kannst du organische, blob-artige Formen erstellen.
Häufig gestellte Fragen
Wie mache ich einen perfekten Kreis mit CSS?
Setze border-radius: 50% bei einem Element mit gleicher Breite und Höhe. Z.B.: width: 100px; height: 100px; border-radius: 50%;
Was bedeutet border-radius: 10px 20px 30px 40px?
Die Werte gehen im Uhrzeigersinn: oben-links, oben-rechts, unten-rechts, unten-links. Also 10px oben-links, 20px oben-rechts, usw.
Wie erstelle ich einen Pill-Button?
Setze border-radius auf einen sehr hohen Wert wie 9999px oder 999em. Das erzeugt die typische Pillenform unabhängig von der Größe.
Funktioniert border-radius bei allen Elementen?
Ja, border-radius funktioniert bei allen Block- und Inline-Block-Elementen, auch bei Bildern, Buttons, Inputs und Containern.