Border-Radius-Generator
Vier Schieberegler für klassisch abgerundete Ecken oder der organische Modus mit 8 Werten für „Blob“-Formen. Sofortige Vorschau und CSS-Code zum Kopieren.
Horizontale Radien (vor dem / Schrägstrich):
Vertikale Radien (nach dem / Schrägstrich):
Die Doppelradius-Syntax (mit Schrägstrich)
Jede Ecke von border-radius ist eigentlich ein Viertel einer Ellipse, festgelegt durch einen horizontalen und einen vertikalen Radius. Schreibst du border-radius: 60% 40% 30% 70% / 60%
30% 70% 40%, legen die vier Werte vor dem Schrägstrich die horizontalen Radien der Ecken fest (im Uhrzeigersinn ab oben links) und die Werte nach dem Schrägstrich die vertikalen Radien. Sobald sich die beiden Radien einer Ecke unterscheiden, wird die Kurve asymmetrisch, und genau so entstehen organische Formen.
Wofür sich Blob-Formen eignen
Organische Formen eignen sich hervorragend als Rahmen für Profilfotos, als dekorative Hintergründe in Hero-Bereichen und für verspielte Schaltflächen. Mit Prozentwerten statt Pixeln passt sich die Form jeder Elementgröße an; du kannst sogar zwischen zwei Blobs animieren, mit einem einfachen
transition: border-radius .4s für einen Wackelpudding-Effekt beim Hovern.