CSS-Border-Radius-Generator 2026

So funktioniert der Border-Radius-Generator

Der Generator setzt die vier Slider-Werte zu einem CSS-konformen Border-Radius-String zusammen. Sind alle vier Werte identisch, wird der kompakte Einzelwert ausgegeben (z. B. 12px). Andernfalls die ausführliche Vier-Werte-Notation, im Uhrzeigersinn ab oben links.

Die Live-Vorschau zeigt eine farbige Box mit angewendetem Radius. So sehen Sie sofort, wie der Effekt in Ihrer UI wirken würde – ohne erst CSS in den Browser zu pasten und neu zu laden.

CSS-Spezifikation

border-radius ist im CSS Backgrounds and Borders Module Level 3 standardisiert (W3C). Die Eigenschaft wird seit CSS3 von allen Browsern unterstützt – heute ohne Vendor-Prefix in jedem Browser ab IE9.

Der Wert kann in jeder gültigen CSS-Längeneinheit angegeben werden: px, em, rem, %, vh, vw. Prozent-Werte beziehen sich auf die jeweilige Elementdimension – horizontal auf die Breite, vertikal auf die Höhe.

Anwendungsfälle

Buttons: 4–8 px für eckig-modern, 50 % für Pillen-Form bei Tags.
Cards: 8–16 px für freundliche, einladende Containers.
Avatare: 50 % auf quadratischer Box ergibt den klassischen runden Avatar.
Eingabefelder: 4–6 px wirkt seriös, 12+ px verspielt – passend zur Markenidentität wählen.
Asymmetrische Formen: Nur einzelne Ecken runden für Speech-Bubble-Optik oder Tab-Navigation.

Datenschutz: Client-Side

Berechnung und Vorschau finden komplett im Browser statt. Es werden keine Werte an einen Server gesendet, keine Cookies gesetzt, keine externen Dienste durchgeführt. Die Clipboard-API für das Kopieren ist nativ.

Damit ist die Nutzung DSGVO-konform ohne weitere Maßnahmen – es findet keine Verarbeitung personenbezogener Daten statt.

Typische Fehler

Inkonsistente Radien im Designsystem: Mal 4 px, mal 6 px, mal 10 px – wirkt unaufgeräumt. Designtokens definieren (z. B. Tailwind: rounded-sm/md/lg/xl/2xl).
50 % auf Rechteck: Erzeugt Ellipse, nicht Kreis. Für Kreise muss das Element quadratisch sein.
Bilder nicht beschnitten: Inhalt steht über die Rundung hinaus. overflow: hidden auf Container setzen.
Zu hohe Radien: 50+ px bei kleinen Elementen wirkt cartoonhaft. Pragmatisch: max. halbe Höhe.
Animierter Wechsel zu 0: Der Übergang von 8px zu 0 ist hart sichtbar. Lieber transition mit ease-in-out.

Häufige Fragen

border-radius rundet die Ecken eines HTML-Elements ab. Ein Wert wie 8px erzeugt sanft abgerundete Ecken, 50 % auf einem quadratischen Element ergibt einen perfekten Kreis. Die Eigenschaft akzeptiert bis zu vier Werte, einer pro Ecke, und kann sogar Ellipsen-Radien (zwei Werte pro Ecke) abbilden.

Ein Wert für alle Ecken (8px), zwei Werte für Diagonalen (top-left + bottom-right / top-right + bottom-left), drei Werte (top-left / top-right + bottom-left / bottom-right) oder vier (im Uhrzeigersinn ab oben links). Mit Slash kann pro Ecke ein Ellipsen-Radius angegeben werden, etwa 30px / 60px.

Pixel für klare, statische Rundungen unabhängig von Schriftgröße. Prozent (50 %) für perfekte Kreise oder Ellipsen relativ zur Elementgröße. rem oder em, wenn die Rundung mit der Schriftgröße skalieren soll – z. B. responsive Buttons, deren Radius proportional bleibt.

border-radius ist die Kurzform. Einzelne Ecken setzt man mit border-top-left-radius, border-top-right-radius usw. – das ist ausführlicher, aber gut für Override-Szenarien in Komponenten-Bibliotheken. Beide Schreibweisen werden gleich gerendert.

Ja, border-radius lässt sich verlustfrei animieren – Browser interpolieren zwischen Werten. Beliebt für 'morphing' Effekte: Buttons, die sich beim Hover zu Pillen verformen. Bei Übergängen aus 0 auf hohe Werte kann es kurz zu eckigem Aufblitzen kommen, dann besser kleinen Startwert (1px) wählen.

Mit Slash-Notation kann pro Ecke ein horizontaler und ein vertikaler Radius angegeben werden – das ergibt eine Ellipse statt eines Kreises. Beispiel: border-radius: 50px / 100px erzeugt eine breitere Rundung. Selten genutzt, aber kraftvoll für organische Formen.

Element quadratisch machen (gleiche Höhe und Breite), dann border-radius: 50% setzen. Ohne quadratische Maße entsteht eine Ellipse. Für Avatare ist das der Standard – plus overflow: hidden, damit das Bild im Kreis beschnitten wird.

Ja, sowohl bei <img> direkt als auch bei <div> mit background-image. Wichtig: Bei <img> kann die Browser-Render-Engine bei sehr großen Radien manchmal seltsame Aliasing-Artefakte zeigen – Abhilfe: Bild in <div> mit overflow: hidden und background-image setzen.

2026 dominieren weiche Rundungen (8–16 px) für UI-Elemente und sehr starke Pillen (border-radius: 9999px) für Tags und Badges. Glassmorphismus und Neumorphismus nutzen mittlere Rundungen kombiniert mit Schatten. Brutalismus dagegen verzichtet komplett auf Rundungen – ein bewusster Designstil.