Border-Radius-Generator
Runden Sie Ecken ab und erstellen Sie organische Blob-Formen.
- Sofort
- Kostenlos
- Privat (lokal verarbeitet)
- Ohne Anmeldung
Von klassischen abgerundeten Ecken zu trendigen Blobs
Der Modus 4 Ecken deckt den Alltag ab: Buttons, Karten, Avatare. Der Blob-Modus nutzt die Acht-Werte-Syntax für weiche, organische Formen, die in Illustrationen und dekorativen Hintergründen sehr beliebt sind.
-
Modus wählen
4 Ecken für einfaches Runden, Blob für eine organische Form.
-
Regler anpassen
Der Button „Zufällig“ erzeugt mit einem Klick einen einzigartigen Blob.
-
CSS kopieren
Die vollständige border-radius-Eigenschaft, fertig zum Einfügen.
Die Syntax in zwei Beispielen
| Modus | Generiertes CSS |
|---|---|
| 4 gleiche Ecken | border-radius: 16px; |
| Standard-Blob | border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; |
| Vor dem / Schrägstrich | Horizontale Radien der 4 Ecken |
| Nach dem / Schrägstrich | Vertikale Radien der 4 Ecken |
Alles wird im Browser berechnet. Um ein Bild auf die Form zu beschneiden, fügen Sie overflow: hidden am Container hinzu.
Häufige Fragen
Wie runde ich eine einzelne Ecke ab?
Im Modus „4 Ecken“ stellen Sie den Regler der gewünschten Ecke ein und lassen die anderen auf 0. Das erzeugte CSS listet die Radien in der Reihenfolge oben-links, oben-rechts, unten-rechts, unten-links; sind alle Werte gleich, schreibt das Tool einen einzelnen Wert.
Was ist die Acht-Werte-Blob-Syntax?
border-radius akzeptiert horizontale und vertikale Radien, getrennt durch einen Schrägstrich „/“. Zum Beispiel ergibt „30% 70% 70% 30% / 30% 30% 70% 70%“ vier Ecken mit asymmetrischen Radien — das erzeugt diese weichen organischen Formen.
Warum Prozente statt Pixel verwenden?
Prozente sind relativ zur Elementgröße: der Blob behält seine Proportionen bei jeder Dimension. Pixel eignen sich besser für eine feste Rundung, wie ein Button oder eine Karte mit konstanten Ecken.
Beschneidet border-radius den Inhalt?
Rahmen und Hintergrund folgen der Rundung, aber Kindinhalt kann überlaufen. Fügen Sie „overflow: hidden“ am Element hinzu, damit Bilder und Inhalt auf die abgerundeten Ecken beschnitten werden.