Tools · CSS · CSS-Ecken abrunden
CSS-Ecken abrunden
Gestalte jede Ecke einer Box einzeln, oder verschmelze sie zu einer organischen Blob-Form, und kopiere das border-radius-CSS.
Füge eine Datei hinzu und starte das Tool.
Deine Datei ist bereit.
Versuch eine andere Datei, oder versuch es erneut.
Einstellungen
Passe die Einstellungen unten an. Das Ergebnis aktualisiert sich dabei.
Läuft komplett im Browser. Es wird nichts hochgeladen.
Läuft komplett im Browser. Nichts wird je auf einen Server hochgeladen.
So funktioniert es
Den verknüpften Radius einstellen, oder "Alle Ecken verknüpfen" ausschalten, um jede einzeln einzustellen.
In den Blob-Modus wechseln, die Weichheit einstellen, und auf Zufällig klicken für eine organische Form.
Das fertige border-radius-CSS kopieren.
Häufige Fragen
Ja. Schalte "Alle Ecken verknüpfen" aus und stelle alle vier unabhängig voneinander ein.
Er erzeugt die border-radius-Kurzschreibweise, die für organische, unregelmäßige Formen genutzt wird: einen unterschiedlichen horizontalen und vertikalen Radius pro Ecke. Stelle mit Weichheit ein, wie stark der Effekt ausfällt, und klicke dann auf Zufällig für eine neue Form.
Ja. Stelle den Radius auf 50 % für einen Kreis aus einer quadratischen Box, oder eine Pillenform auf einem breiten Rechteck.
Nein. Alles läuft in deinem Browser.
Anleitungen
Ein genauerer Blick auf einzelne Probleme, die dieses Tool löst.
Why Every Rounded Corner Looks the Same (and How Blob Shapes Fix It)
The same 8px or 12px radius on every card, button and image is efficient and instantly forgettable. border-radius can do far more than round a rectangle's corners evenly.
Anleitung lesenHow to Round Corners and Build CSS Blob Shapes
Simple mode for a clean rectangle, circle or pill. Blob mode for an organic, asymmetric shape. The exact controls for both, and what the generated CSS actually contains.
Anleitung lesenCircle, Pill or Blob: Picking the Right border-radius
An avatar circle, a pill button and an organic background shape all use border-radius, with three different settings: 50% on a square, a px radius of half the height, eight percentages.
Anleitung lesen
Kommentare