Einheit wählen
Entscheide dich zwischen Pixeln und Prozentwerten.
Border-Radius-Generator
BORDER RADIUS DESIGN TOOL
Ecken gestalten. Form sichtbar machen.
Erstelle individuelle CSS-Rundungen für Karten, Bilder, Buttons und moderne Webdesign-Elemente. Passe jede Ecke einzeln an und kopiere anschließend den fertigen CSS-Code.
Live-Vorschau
4 Ecken individuell
px & %
CSS kopieren
SO FUNKTIONIERT'S
In sechs Schritten zur perfekten Rundung
Der Generator ist auch für Einsteiger gedacht. Alle Änderungen werden sofort in der Vorschau und im fertigen CSS-Code übernommen.
Grundradius einstellen
Mit dem Hauptregler veränderst du zunächst alle vier Ecken gemeinsam.
Ecken einzeln anpassen
Löse die Verknüpfung und gestalte jede Ecke individuell.
Live prüfen
Die große Vorschau zeigt die Form sofort in einer realistischen Anwendung.
Preset ausprobieren
Vorgefertigte Formen liefern schnell Inspiration für dein Design.
CSS übernehmen
Kopiere den fertigen Border-Radius direkt in dein eigenes Projekt.
◒
Was bedeutet border-radius?
Mit border-radius bestimmst du, wie stark die Ecken eines HTML-Elements abgerundet werden. Jede der vier Ecken kann dabei einen eigenen Wert erhalten.
TL
Oben links
TR
Oben rechts
BR
Unten rechts
BL
Unten links
BORDER RADIUS GENERATOR
Deine Form zusammenstellen
Passe die Rundung direkt an. Vorschau und CSS-Code aktualisieren sich automatisch.
01
Einstellungen
Radius und Form bestimmen.
EINHEIT
CSS-Einheit
Alle Ecken koppeln
Eine Änderung wird auf alle vier Ecken übernommen.
GRUNDRADIUS
Alle Ecken
28px
ECKE 01
Oben links
px
ECKE 02
Oben rechts
px
ECKE 03
Unten rechts
px
ECKE 04
Unten links
px
02
Live-Vorschau
So wirkt deine Rundung im Einsatz.
CREATIVE DESIGN
Runde Ecken. Klare Wirkung.
Mit wenigen Einstellungen entsteht aus einem einfachen Rechteck eine völlig neue Form.
CSS OUTPUT
Fertiger Code
border-radius: 28px;
LIVE APPLICATIONS
CARD
BUTTON
IMAGE / FEATURE BOX
So wirkt dein Border-Radius
Die aktuelle Rundung wird automatisch auf typische Webdesign-Elemente übertragen.
CREATIVE UI
Moderne Card
Design · Form · Wirkung
DESIGNS COMMUNITY
Formen geben
deinem Design Charakter.
RADIUS INSPIRATION
Fertige Formen ausprobieren
Ein Klick übernimmt die Werte direkt in den Generator.
SOFT
Soft Corners
Dezente Rundung für Panels, Eingabefelder und klassische Cards.
MODERN
Modern Card
Großzügige Rundungen für moderne Webdesign-Flächen.
ROUND
Extra Rounded
Deutlich weichere Form für Callouts, Bilder und große Cards.
LEAF
Leaf Shape
Wechselnde Rundungen erzeugen einen markanten organischen Look.
ORGANIC
Organic Shape
Prozentwerte sorgen für interessante asymmetrische Formen.
BLOB
Creative Blob
Auffällige Form für Illustrationen, Grafiken und besondere Designflächen.
Nicht jede Ecke muss gleich sein
Unterschiedliche Werte können Karten und Grafiken deutlich individueller wirken lassen.
Rundungen wiederholen
Verwende ähnliche Radiuswerte innerhalb eines Designs. Dadurch entsteht ein ruhiger und konsistenter Stil.
Form und Inhalt beachten
Sehr starke Rundungen eignen sich besonders gut für große Flächen, Bilder, Badges und kreative Elemente.
DEINE FORM. DEIN DESIGN.
Radius gefunden?
Kopiere den fertigen CSS-Code und verwende deine neue Form direkt auf deiner Webseite, in deinem Forum oder im nächsten Designprojekt.
CSS wurde kopiert