Border-Radius-Generator
Runde Ecken visuell ab – ziehe die Ecken in der Vorschau oder wechsle zu organischen Blob-Formen.
Ziehe die Eckpunkte, um die Ecken abzurunden
Horizontale Radien
Vertikale Radien
So funktioniert der Border-Radius-Generator
Gestalte abgerundete Ecken direkt in der Vorschau und kopiere einen sauberen border-radius-Wert – auch für organische Blob-Formen.
Ecken ziehen
Greif einen beliebigen Eckpunkt in der Vorschau und zieh ihn nach innen – der Radius folgt deinem Zeiger. Verknüpfe alle Ecken für einen einheitlichen Radius oder forme jede einzeln.
Blob-Formen
Wechsle in den Blob-Modus für die Slash-Syntax mit 8 Werten – horizontale und vertikale Radien pro Ecke ergeben weiche, organische Formen, wie sie in modernen Hero-Bereichen und bei Avataren beliebt sind.
Zufällig
Ein Klick erzeugt einen neuen organischen Blob. Klick so lange weiter, bis dir eine Silhouette gefällt, und justiere sie dann mit den Reglern nach.
Sauberer Code
Der erzeugte Wert wird auf die kürzeste korrekte Form reduziert – ein einzelner Wert für gleiche Ecken, vier Werte oder die vollständige Slash-Syntax für Blobs.
Häufig gestellte Fragen
border-radius akzeptiert horizontale und vertikale Radien, getrennt durch einen Schrägstrich: h1 h2 h3 h4 / v1 v2 v3 v4. Jede Ecke wird so zu einer Viertelellipse statt zu einem Viertelkreis – genau so entstehen organische Blob-Formen in reinem CSS.
Pixel ergeben eine feste Eckengröße, unabhängig von den Maßen des Elements – ideal für Karten und Buttons. Prozentwerte skalieren mit dem Element: 50% auf einem Quadrat ergeben einen perfekten Kreis, und Blob-Formen basieren auf Prozentwerten.
Nein – border-radius wird vom Compositor gerastert und ist extrem günstig, selbst in Kombination mit overflow: hidden oder Transforms. Du kannst es auch bedenkenlos mit transition animieren.
Kreis: gleiche Breite und Höhe plus border-radius: 50%. Pille: ein beliebiges Rechteck mit einem border-radius von mindestens der halben Höhe – üblich ist einfach 999px.