Über dieses Tool
Abgerundete Ecken prägen die Wirkung einer Oberfläche, und border-radius kann weit mehr als einen einzigen einheitlichen Wert. Dieser Generator lässt Sie jede Ecke einzeln runden und die volle Acht-Werte-Syntax (horizontal/vertikal) nutzen, um weiche, organische „Blob"-Formen zu erzeugen, die kein bisschen wie ein schlichtes Rechteck aussehen.
Ziehen Sie die Regler, sehen Sie die Form live aktualisieren und kopieren Sie das border-radius-CSS. Alles läuft im Browser.
Häufige Fragen
Was ist der Unterschied zwischen verknüpftem Modus und Modus pro Ecke?
Der verknüpfte Modus wendet einen einheitlichen Pixel-Radius auf alle vier Ecken an; deaktivieren Sie ihn, wechseln Sie in den Modus pro Ecke, in dem Sie für jede Ecke einen eigenen horizontalen und vertikalen Prozentwert festlegen.
Kann ich elliptische (nicht kreisrunde) Ecken erstellen?
Ja. Wechseln Sie in den Modus pro Ecke und legen Sie unterschiedliche horizontale und vertikale Prozentwerte fest — CSS border-radius unterstützt zwei Radien pro Ecke, und dieses Tool macht beide zugänglich.
Wie erstelle ich einen perfekten Kreis oder eine Pillenform?
Für einen Kreis stellen Sie den einheitlichen Radius auf 50% der Breite/Höhe des Elements (oder nutzen Sie den Modus pro Ecke mit 50%/50%); für eine Pillenform stellen Sie den Radius auf mindestens die Hälfte der Elementhöhe.
Wird mein Design irgendwohin hochgeladen?
Nein. Die Vorschau-Box und das generierte CSS werden ausschließlich lokal in Ihrem Browser berechnet.
Warum enthält die Ausgabe manchmal einen Schrägstrich (/) im CSS?
Der Schrägstrich trennt horizontale und vertikale Radien (`border-radius: h1 h2 h3 h4 / v1 v2 v3 v4`) — das erscheint nur im Modus pro Ecke, da der verknüpfte Modus nur einen Wert benötigt.