CSS Border Radius Generator
Steuern Sie alle 8 Border-Radius-Werte visuell.
Erstellen Sie Blob-Formen mit Echtzeit-Vorschau.
Über
Mit dem CSS Border Radius Generator können Sie alle 8 border-radius-Werte (horizontaler und vertikaler Radius für jede der 4 Ecken) visuell steuern und das Ergebnis in Echtzeit betrachten.
Über normale abgerundete Ecken hinaus können Sie komplexe Blob-Formen wie border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% erstellen – beliebt für Hero-Section-Dekorationen. Die gesamte Verarbeitung erfolgt lokal in Ihrem Browser.
Bedienungsanleitung
Vorlage wählen
Beginnen Sie mit einer Vorlage (Kreis, Blatt, Blob usw.), um schnell eine Grundform zu erhalten, und nehmen Sie dann die Feinabstimmung mit den Schiebereglern vor.
Regler anpassen
Ziehen Sie die horizontalen und vertikalen Schieberegler für jede Ecke. Die Vorschau wird sofort aktualisiert.
CSS kopieren
Klicken Sie auf "Kopieren", um das generierte CSS in die Zwischenablage zu kopieren, und fügen Sie es in Ihr Stylesheet ein.
Glossar
- border-radius
- Eine CSS-Eigenschaft, die die Ecken eines Elements abrundet. Unterstützt px- und %-Einheiten für jede Ecke unabhängig voneinander.
- Horizontaler / vertikaler Radius
- Die beiden Radien einer Ellipse, die durch border-radius definiert wird. Das Trennzeichen "/" trennt horizontale (davor) und vertikale (danach) Werte.
- Blob
- Eine organische, unregelmäßige Form, die durch asymmetrische border-radius-Werte auf allen 8 Achsen erstellt wird.
- clip-path
- Eine CSS-Eigenschaft zum Zuschneiden von Elementen in benutzerdefinierte Formen. Flexibler als border-radius, aber die Syntax ist komplexer.
- Kurzschreibweise
- border-radius: 10px 20px 30px 40px — alle vier Ecken in einer einzigen Deklaration. Verwenden Sie "/", um zwischen horizontal und vertikal aufzuteilen.
FAQ
- F.Was sind die 8 Werte?
- Jede der 4 Ecken hat einen horizontalen und einen vertikalen Radius, was insgesamt 8 Werte ergibt. Format: border-radius: A B C D / E F G H.
- F.Wofür kann ich Blob-Formen verwenden?
- Hero-Section-Hintergrunddekoration, Profilbildmasken, CTA-Button-Formen und mehr.
- F.Werden Daten an einen Server gesendet?
- Nein. Alles wird lokal in Ihrem Browser generiert.
- F.Funktioniert es in IE11?
- border-radius funktioniert ab IE9. Die elliptische Notation (mit "/") funktioniert ebenfalls ab IE9+.
- F.Kann ich es mit Sass oder Less verwenden?
- Ja. Der generierte Code ist Standard-CSS und funktioniert daher direkt mit Sass, Less und Stylus.
Anwendungsfälle
Button- & Kartendesign
Erstellen Sie einzigartige abgerundete Formen für Schaltflächen und Kartenkomponenten jenseits von Standardkreisen.
Blob-Hintergrunddekoration
Verwenden Sie organische Blob-Formen als Hero-Section-Hintergründe auf Landing Pages.
Profilbildmaske
Entdecken Sie ungewöhnliche Masken für Profilbilder jenseits des Standardkreises oder -quadrats.
CSS lernen
Verstehen Sie visuell, wie border-radius funktioniert, indem Sie mit den Schiebereglern experimentieren.