Kategorie: Entwicklung
CSS-Border-Radius-Generator
Ecken einzeln runden, mit Live-Vorschau
Ziehen Sie einen Regler pro Ecke und kopieren Sie die border-radius-Deklaration. Elliptische Ecken schalten die Schrägstrich-Syntax für organische Formen frei.
border-radius: 12px;
Die Vorschau ist ein echtes Element mit dem erzeugten Wert, Sie sehen also genau das, was der Browser zeichnet.
Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.
Wozu dieses Werkzeug dient
border-radius sieht nach einer einzigen Zahl aus, bis drei Ecken sich unterscheiden sollen, und dann führt die Kurzschreibweise in die Irre: Die vier Werte laufen im Uhrzeigersinn von oben links, und die Schrägstrich-Form gibt jeder Ecke einen waagerechten Radius vor und einen senkrechten nach dem Strich. Diese zweite Form zeichnet die weichen, asymmetrischen Silhouetten, die organisch wirken statt wie eine abgerundete Box. Hier gibt es einen Regler je Ecke, ein echtes Element mit angewendetem Wert statt eines Bildes davon, und eine Ausgabe, die so verkürzt ist, wie ein Mensch sie schreiben würde: vier gleiche Ecken ergeben einen einzigen Wert.
So funktioniert es
- Wählen Sie die Einheit und entkoppeln Sie die Ecken, wenn sie sich unterscheiden sollen.
- Ziehen Sie jede Ecke, bis die Vorschau stimmt.
- Schalten Sie elliptische Ecken für organische Formen ein und kopieren Sie die Deklaration.
Datenschutz
Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.
Häufig gestellte Fragen
- Was bedeutet der Schrägstrich im Wert?
- Alles vor dem Strich ist der waagerechte Radius jeder Ecke, alles danach der senkrechte. Unterschiedliche Werte ergeben eine Ellipse statt eines Viertelkreises.
- Prozent oder Pixel?
- Pixel halten die Rundung bei jeder Größe gleich, was Schaltflächen und Karten meist wollen. Prozente skalieren mit dem Element: 50 Prozent auf einem Quadrat ergeben einen Kreis.
- Warum hat meine Ausgabe weniger als vier Werte?
- CSS fasst gleiche Ecken zusammen, und dieses Werkzeug ebenso: vier gleiche Ecken sind ein Wert, ein gleiches Diagonalpaar sind zwei. Das Ergebnis ist identisch, nur kürzer.