Border-Radius-Generator

Eine border-radius-Deklaration kann bis zu vier unabhängige Eckenwerte sowie eine optionale Acht-Werte-Schrägstrich-Syntax für organische Kurven annehmen – mehr bewegliche Teile, als den meisten bewusst ist, bis sie etwas jenseits einer einfachen abgerundeten Karte benötigen. Dieser Generator bildet jeden einzelnen dieser Teile ab: vier Ecken-Regler mit individueller px- oder Prozent-Einheit, eine Ecken-verknüpfen-Funktion für symmetrische Formen und einen Blob-Modus für Formen, die kein einzelner Radius-Wert ausdrücken kann.

Der Ecken-Modus deckt die Formen ab, die tatsächlich gebraucht werden: Verknüpfen Sie alle Ecken mit einem Regler für perfekte Kreise, Pillen und Squircles, oder lösen Sie die Verknüpfung, um nur die Oberseite eines Dropdown-Panels oder nur eine Seite einer Karte abzurunden. Eine Schachbrett-Vorschau hinter der Form, umschaltbar zwischen hellem und dunklem Hintergrund, macht sofort ersichtlich, welche Ecken bei welchem Radius abgeschnitten werden – derselbe visuelle Trick, den auch die Datei-Tools auf dieser Site verwenden, um Transparenz darzustellen.

Der Blob-Modus ist die andere Hälfte: Die CSS-Acht-Werte-Schrägstrich-Syntax erlaubt es, dass die horizontalen und vertikalen Radien jeder Ecke voneinander abweichen – genau das verwandelt ein abgerundetes Rechteck in eine organische, unregelmäßige Kontur. Klicken Sie jederzeit auf „Zufallsgenerieren“ für eine neue Form und kopieren Sie das exakte CSS dahinter – kein SVG-Export oder externe Bibliothek nötig. Voreingestellte Seiten decken die Anfragen ab, die tatsächlich in Suchfelder eingegeben werden: einen perfekten Kreis, einen stadionförmigen Pillen-Button, ein Squircle im iOS-Stil und einen fertigen organischen Blob.

Wie jedes Tool auf dieser Site läuft es vollständig in Ihrem Browser: kein Upload, kein Konto, und der Generator funktioniert offline weiter, sobald die Seite geladen ist.