Fancy Border-Radius

Acht Regler. Eine organische Form. Live-CSS zum Einfügen.

Was ist dieser Fancy-Border-Radius-Generator?

Dieser kostenlose Fancy-Border-Radius-Generator verwandelt die achtwertige CSS-border-radius-Syntax in einen taktilen Spielplatz mit acht Griffen — ziehe einen beliebigen Griff und die Form morpht in Echtzeit, während direkt daneben einfügebereites CSS aktualisiert wird, alles vollständig in deinem Browser.

Wie erstelle ich eine organische Blob-Form in reinem CSS?

Ziehe die acht Umrandungsgriffe, um horizontale und vertikale Radien für jede Ecke unabhängig festzulegen. Die Vorschau morpht live und die erzeugte border-radius-Deklaration erscheint daneben, bereit zum Kopieren in dein Stylesheet.

Wichtige Funktionen

Acht Live-Griffe
Zwei Schieberegler an jeder Seite der Bühne steuern unabhängig die vier horizontalen und vier vertikalen Radien — dieselbe Steuerung, mit der Designer Blob-, Blatt- und Kiesel-Formen entwerfen.
Produktionsreifes CSS
Die Ausgabe nutzt die achtwertige W3C-border-radius-Kurzschreibweise, die in jedem modernen Browser unterstützt wird, mit einem Ein-Klick-Kopierbutton und einer Tailwind-freundlichen Variante mit beliebigen Werten.
Prozent- oder Pixel-Einheit
Wechsle zwischen Prozent für responsive Formen, die mit ihrem Container skalieren, und Pixel für pixelgenaue Komponenten.
Kuratierte Vorlagen und Zufall
Starte mit handverlesenen Vorlagen — Blob, Blatt, Cookie, organisch — oder klicke auf Zufällig für frische Inspiration bei jedem Klick.

So funktioniert es

Ziehe einen der acht um die Vorschau angeordneten Griffe, um jede Ecke zu formen; Form und CSS aktualisieren sich gemeinsam. Passe Breite, Höhe und Farbe an, um deine Komponente zu imitieren, drücke dann CSS kopieren, um den Snippet zu erhalten, oder Tailwind kopieren für eine Arbitrary-Value-Klasse, die du in dein Markup einfügen kannst.

Häufig gestellte Fragen

Wie funktioniert die achtwertige border-radius-Syntax?

Die Kurzschreibweise setzt vier horizontale Radien (oben-links, oben-rechts, unten-rechts, unten-links) und vier vertikale Radien in derselben Reihenfolge, getrennt durch einen Schrägstrich — und erzeugt an jeder Ecke eine elliptische Kurve, was organische Blob-Formen erst möglich macht.

Sind die erzeugten Formen responsiv?

Ja — wenn du Prozent-Einheiten verwendest, skalieren die Radien fluide mit der Box des Elements, sodass eine einzige Regel die Silhouette über alle Breakpoints hinweg beibehält.

Kann ich das für Produktionscode verwenden?

Auf jeden Fall. Die achtwertige border-radius-Syntax ist Teil des CSS Backgrounds and Borders Module Level 3 und wird in jedem Evergreen-Browser unterstützt, einschließlich iOS Safari und Android Chrome.

Vom Tooljar-Team gemäß der W3C-Spezifikation CSS Backgrounds and Borders Module Level 3 entwickelt, mit achtwertigen Radien, die live gerendert werden — was du in der Vorschau siehst, ist genau das, was der Browser aus der erzeugten Deklaration malt.