Die CSS-Eigenschaft border-radius ist ein grundlegendes Werkzeug im Webdesign, um die Ecken von Boxen abzurunden. Mit dem Border-Radius-Generator lassen sich diese Rundungen präzise über Schieberegler steuern, visuell in einer Live-Vorschau prüfen und direkt als fertiger CSS-Code exportieren. Das Tool deckt sowohl einfache, symmetrische Abrundungen als auch komplexe, organische Formen ab.
Funktionsweise und Steuerung der Ecken
Das Tool ermöglicht es, die Rundung jeder Ecke einer Box individuell anzupassen oder alle Ecken miteinander zu verknüpfen. Die Steuerung erfolgt über Schieberegler, die einen Wertebereich von 0 bis 100 abdecken.
Die Zuordnung der Regler folgt dem Uhrzeigersinn, beginnend an der oberen linken Ecke:
- Oben links
- Oben rechts
- Unten rechts
- Unten links
Wenn die Option „Alle Ecken verknüpfen“ aktiviert ist, steuert ein einziger Schieberegler mit der Beschriftung „Alle Ecken“ die gesamte Box synchron. Wird diese Verknüpfung aufgehoben, stehen vier separate Regler für die einzelnen Ecken zur Verfügung. Der initiale Standardwert des Schiebereglers liegt bei 24, was zu dem CSS-Code border-radius: 24px; führt.
Pixel versus Prozent im Webdesign
Der Generator bietet einen Einheiten-Wähler, mit dem zwischen „px“ (Pixel) und „%“ (Prozent) gewechselt werden kann. Die Wahl der Einheit beeinflusst maßgeblich, wie sich die Rundung bei einer Größenänderung des Elements verhält:
- Pixel (px): Bei dieser Einheit wird die Ecke um einen festen, absoluten Wert abgerundet. Die Rundung bleibt unabhängig von der tatsächlichen Breite oder Höhe der Box immer identisch.
- Prozent (%): Hier erfolgt die Abrundung relativ zur Größe der Box. Ein horizontaler Prozentwert bezieht sich auf die Breite des Elements, während sich ein vertikaler Prozentwert an der Höhe orientiert. Dies ist besonders im Responsive Design von Bedeutung, da sich die Form dynamisch an die Dimensionen des Anzeigegeräts anpasst.
Symmetrische Rundungen und der elliptische Modus
Standardmäßig ist der elliptische Modus deaktiviert. In diesem Zustand ist jede Ecke ein perfekter Viertelkreis, der durch einen einzigen Radius definiert wird.
Sobald die Option „Elliptische Ecken“ aktiviert wird, wechselt das Tool in den elliptischen Modus. In diesem Modus erhält jede Ecke zwei separate Schieberegler:
- Horizontal
- Vertikal
Durch die Trennung in einen horizontalen und einen vertikalen Radius entstehen weichere, asymmetrische und organische Formen. Im CSS-Code spiegelt sich dies durch die Schrägstrich-Schreibweise (Slash-Syntax) wider. Der Generator schreibt diese spezielle Zwei-Wert-Form automatisch, sobald der Modus aktiv ist, und wechselt selbstständig zur kompakteren Kurzform zurück, wenn die Ecken wieder symmetrisch rund sind.
Geometrische Spezialformen und Vorlagen
Mit gezielten Einstellungen lassen sich klassische Design-Elemente und komplexe Freiformen erzeugen:
- Perfekter Kreis: Um ein quadratisches Element in einen perfekten Kreis zu verwandeln, verknüpft man alle Ecken, wählt die Einheit Prozent und stellt den Wert auf 50 % ein.
- Pillenförmige Schaltfläche (Pill-Shape): Für eine typische Schaltfläche mit vollrunden Seiten wählt man die Einheit Pixel und zieht den Regler über die Hälfte der Höhe des Buttons hinaus. Die Seiten bleiben dadurch bei jeder beliebigen Breite der Schaltfläche perfekt abgerundet, ohne dass sich die Rundungen überschneiden.
Zur Beschleunigung des Designprozesses bietet das Tool verschiedene Vorlagen:
- Scharf: Setzt alle Radien auf 0.
- Abgerundet: Erzeugt eine dezente, klassische Abrundung.
- Kreis: Setzt alle Ecken direkt auf 50 %.
- Blob: Erstellt eine unregelmäßige, organische Tropfenform unter Nutzung des elliptischen Modus.
- Blatt: Erzeugt eine spitze, blattähnliche Form durch die asymmetrische Verteilung der Radien.
Integration des generierten CSS-Codes
Unterhalb der visuellen Vorschau befindet sich der Bereich „CSS“, in dem der Code in Echtzeit generiert wird. Über die Schaltfläche „CSS Kopieren“ lässt sich der fertige Code direkt in die Zwischenablage kopieren und in das eigene Stylesheet einfügen.
Ein typisches CSS-Ergebnis für eine einfache Rundung sieht wie folgt aus:
border-radius: 24px;
Bei komplexen, elliptischen Formen nutzt der Generator die Schrägstrich-Schreibweise, die die horizontalen Radien von den vertikalen Radien trennt:
border-radius: 10% 20% 30% 40% / 40% 30% 20% 10%;
Datenschutz und Client-seitige Verarbeitung
Die Privatsphäre bei der Nutzung des Tools ist systembedingt geschützt. Jede Ecke wird direkt im Browser gezeichnet. Es findet keine Übertragung der Einstellungen oder Designdaten an BroBroGo statt.
Häufig gestellte Fragen (FAQ)
Wie funktionieren die vier Ecken und px vs. %?
Die vier Schieberegler sind im Uhrzeigersinn den Ecken oben links, oben rechts, unten rechts und unten links zugeordnet. In Pixeln wird eine Ecke um einen festen Wert abgerundet; in Prozent erfolgt die Abrundung relativ zur Box – ein horizontaler Prozentwert bezieht sich auf die Breite und ein vertikaler auf die Höhe, sodass 50 % ein Quadrat in einen Kreis verwandeln.
Was bewirkt der elliptische Modus?
Ausgeschaltet ist jede Ecke ein Viertelkreis mit einem einzigen Radius. Schalten Sie den Modus ein, erhält jede Ecke einen separaten horizontalen und vertikalen Radius. So erstellen Sie weiche, organische „Blob“-Formen. Der Generator schreibt die Schrägstrich-Schreibweise mit zwei Werten für Sie und wechselt zur Kurzform zurück, sobald die Ecken wieder rund sind.
Wie erstelle ich einen perfekten Kreis oder eine Pillenform?
Verknüpfen Sie die Ecken, wechseln Sie zu Prozent und stellen Sie 50 % ein: Ein Quadrat wird zum Kreis. Für eine pillenförmige Schaltfläche behalten Sie stattdessen Pixel bei und ziehen Sie eine Ecke über die Hälfte der Button-Höhe hinaus – die Seiten bleiben bei jeder Breite vollständig abgerundet. Das Preset „Kreis“ richtet den ersten Fall mit einem Klick ein.