Border-Radius-Generator
Abgerundete Ecken visuell gestalten und das CSS kopieren
Anleitung
- Modus wählen — Der einfache Modus bearbeitet einen Radius pro Ecke; der Ellipsenmodus ergänzt unabhängige vertikale Radien für die Slash-Syntax.
- Einheit wählen — Jederzeit zwischen px und % wechseln; die Schieberegler-Werte bleiben unverändert erhalten.
- Eckenregler ziehen — Jede Ecke von 0 bis 100 anpassen oder einen exakten Wert eingeben. „Ecken verknüpfen” bewegt alle vier gemeinsam.
- Elliptische Radien abstimmen — Im Ellipsenmodus den vertikalen Radius jeder Ecke separat einstellen, um ovale, squircle-artige oder Blob-Formen zu erzeugen.
- CSS kopieren — Die Ausgabe kürzt gleiche Ecken auf die kürzeste gültige Kurzschrift und gibt die Slash-Syntax nur aus, wenn sie wirklich nötig ist.
Funktionen
- Zwei Bearbeitungsmodi — Einfache 4-Ecken-Bearbeitung plus vollwertiger 8-Werte-Ellipsenmodus (
a b c d / e f g h). - Verknüpfte oder unabhängige Ecken — Ein Schalter bewegt alle Ecken synchron oder gibt die Kontrolle pro Ecke frei.
- px- und %-Einheiten — Feste Pixelradien oder elementrelative Prozentwerte, jederzeit umschaltbar.
- Live-Vorschau — Jede Änderung wird sofort auf der Demo-Box gerendert, exakt so, wie der Browser sie zeichnet.
- Minimale Ausgabe — Gleiche Ecken fallen zu einem einzelnen Wert zusammen, teilweise gleiche Ecken nutzen die 2- oder 3-Werte-Kurzschrift, und der Slash erscheint nur bei echten elliptischen Radien.
- 100 % clientseitig — Alles läuft in Ihrem Browser; keine Daten verlassen Ihr Gerät.
Anwendungsfälle
- Squircle-Karten: Große horizontale Radien mit etwas kleineren vertikalen Radien ergeben moderne, iOS-artige abgerundete Rechtecke.
- Organische Blobs: Unterschiedliche elliptische Radien pro Ecke, um Blob-Formen für Hero-Bereiche und Avatare zu prototypen.
- Kreise und Pillen: Auf % wechseln, Ecken verknüpfen und 50 % einstellen — perfekter Kreis (quadratisches Element) oder Pille (breites Element) ganz ohne Rechnen.
- Kurzschrift lernen: Ecken verknüpfen und lösen, um zu beobachten, wie das generierte CSS zwischen einem, zwei, drei und vier Werten wechselt.
Verwandte Tools
- CSS Box-Shadow-Generator — Mehrschichtige Box-Schatten mit Live-Vorschau gestalten.
- CSS Flexbox-Generator — Flexbox-Layouts visuell gestalten und das CSS kopieren.
- CSS Gradient-Generator — Eigene CSS-Verläufe für Ihre Layouts erstellen.
Häufig gestellte Fragen
Was bedeutet die Slash-Syntax bei border-radius?
Der Schrägstrich trennt horizontale und vertikale Radien: border-radius: 10px 20px / 30px 40px gibt jeder Ecke einen horizontalen Radius (vor dem Slash) und einen unabhängigen vertikalen Radius (danach). Das erzeugt elliptische Ecken statt perfekter Viertelkreise. Im Ellipsenmodus lassen sich alle acht Werte bearbeiten.
Sollte ich px oder % für border-radius verwenden?
px eignet sich für eine feste, vorhersehbare Eckengröße, die unabhängig von den Elementmaßen bleibt. % verwendet man, wenn die Rundung mit dem Element skalieren soll — 50% auf allen Ecken macht aus jedem Rechteck einen Kreis oder eine Ellipse. Prozentwerte beziehen sich auf die eigene Breite (horizontal) bzw. Höhe (vertikal) des Elements.
Wie bildet die 4-Werte-Kurzschrift auf die Ecken ab?
Die Werte werden im Uhrzeigersinn ab der oberen linken Ecke zugeordnet: oben links, oben rechts, unten rechts, unten links. Wenn benachbarte oder gegenüberliegende Ecken denselben Wert haben, dürfen die Duplikate weggelassen werden — ein Wert gilt überall, zwei Werte stehen für (oben links/unten rechts) und (oben rechts/unten links). Der Generator kürzt die Ausgabe automatisch.