Zum Inhalt springen
TextArray1.87.0
100% lokal

CSS Border-Radius-Generator

Erstelle eine Border-Radius-Kurzschreibweise aus einzelnen Eckenwerten, mit elliptischen Ecken und Tailwind-Äquivalent.

50
Ausgabe
Verwandte Tools
CSS box-shadow-GeneratorEntwickler-Tools
CSS-Farbverlauf-GeneratorEntwickler-Tools
CSS Grid GeneratorEntwickler-Tools
i18n SchlüsseldiffEntwickler-Tools
TOML-zu-JSON-KonverterEntwickler-Tools
SQL zu JSONEntwickler-Tools
CSS Border-Radius-Generator
Geben Sie einen Radius für jede Ecke ein und dieses Werkzeug erstellt die korrekte Border-Radius-CSS für Sie, verkürzt auf die kürzeste gültige Kurzschreibweise — ein Wert, wenn alle vier Ecken übereinstimmen, zwei oder drei, wenn sich gegenüberliegende Ecken wiederholen, und die vollständige vierweitige Liste, wenn jede Ecke unterschiedlich ist. Es ist für alle entwickelt, die Karten, Schaltflächen, Avatare, Modals oder Eingabefelder gestalten und sauberes, kopierbares CSS ohne manuelle Eckenberechnungen mögen.
Wählen Sie „Auf allen Ecken gleich" für ein einfaches Rechteck mit abgerundeten Ecken, oder wechseln Sie zu „Ecken einzeln", um jede Ecke unabhängig in px, Prozent oder rem einzustellen. Das Aktivieren elliptischer Ecken fügt die Schrägstrich-Notation mit acht Werten hinzu, die Border-Radius unterstützt — einen horizontalen Radius und einen unterschiedlichen vertikalen Radius pro Ecke, gesteuert durch einen Schieberegler, damit eine Squircle oder eine abgeflachte Pillenform mit einem Zug anstelle von acht Feldern entsteht. Die Option „Zufällige organische Form" erzeugt bei jedem Durchlauf eine neue asymmetrische Form — die Art der weichen, unregelmäßigen Kontur, die hinter Bildern und dekorativen Blobs verwendet wird. Wechseln Sie zwischen der Border-Radius-Kurzschreibweise und den vier erweiterten Border-*-Radius-Eigenschaften, und aktivieren Sie die Tailwind-Option, um neben dem normalen CSS die Klasse für beliebige Werte zu erhalten.
Werte werden bei der Eingabe validiert: negative Zahlen werden als Null behandelt und es gibt keinen Zustand, der zu fehlerhaftem CSS führt. Die Live-Tally unter der Ausgabe zeigt, wie viele Deklarationszeilen erzeugt wurden, auf wie viele unterschiedliche Eckenwerte die Kurzschreibweise gekürzt wurde, und die genaue Zeichenzahl an, aktualisiert bei jeder Optionsanpassung.
Alles wird lokal in Ihrem Browser ausgeführt — kein Eckenwert oder generiertes CSS wird jemals irgendwohin gesendet. Kopieren Sie das Ergebnis, laden Sie es als .txt-Datei herunter, oder senden Sie es direkt in die Eingabe eines anderen Werkzeugs, um damit zu arbeiten.
Häufige Fragen
Wie funktioniert die Kurzschreibweise?
Das Werkzeug folgt der gleichen Regel wie Border-Radius selbst: Wenn alle vier Ecken übereinstimmen, gibt es einen Wert aus, wenn sich gegenüberliegende Ecken wiederholen, gibt es zwei aus, und andernfalls listet es alle vier Ecken in der Reihenfolge oben links, oben rechts, unten rechts, unten links auf.
Was fügt die elliptische Option hinzu?
Es fügt einen zweiten, vertikalen Radius für jede Ecke mit der CSS-Schrägstrich-Notation hinzu (z. B. 16px / 8px), was es einer Ecke ermöglicht, in eine Richtung mehr zu krümmen als in die andere — nützlich für Squircles und abgeflachte Pillenformen.
Wofür ist die zufällige organische Form?
Sie erzeugt bei jedem Durchlauf eine frische, asymmetrische Border-Radius — eine schnelle Möglichkeit, die weiche, unregelmäßige Kontur zu erhalten, die häufig hinter Herobildern verwendet wird, ohne acht Zahlen manuell einzustellen.
Entspricht die Tailwind-Ausgabe dem CSS genau?
Ja. Es ist die gleiche Eckenwerte, ausgedrückt als Tailwind-Utility-Klassen für beliebige Werte — eine Klasse mit abgerundeten Kanten, wenn alle Ecken übereinstimmen, oder vier winkelspezifische Klassen, andernfalls.
Wird alles, was ich eingebe, an einen Server gesendet?
Nein. Die CSS- und Tailwind-Ausgabe werden vollständig in Ihrem Browser generiert; nichts, was Sie hier eingeben, wird hochgeladen.