CSS Border Radius: Formen, Blobs und kreative Ecken

Erkunde border-radius von einfachen abgerundeten Ecken bis zu komplexen Blob-Formen mit der vollstaendigen 8-Wert-Syntax.

5 Min. Lesezeit CSS · Design · UI 6 Abschnitte + FAQ

CSS border-radius ist viel leistungsstaerker als die meisten Entwickler erkennen. Hinter einfachen abgerundeten Ecken verbirgt sich eine vollstaendige 8-Wert-Syntax fuer organische Formen.

Jede Ecke kann unabhaengige horizontale und vertikale Radien haben, was fluessige, organische Formen ermoelicht, die zuvor nur mit SVG moeglich waren.

border-radius Syntax (1-4 Werte)

border-radius akzeptiert 1 bis 4 Werte mit Standard-CSS-Kurzschreibweise. Ein Wert: alle vier Ecken gleich. Zwei Werte: erster gilt fuer oben-links und unten-rechts.

Kostenloses Tool Border Radius Generator Erstelle benutzerdefinierte Formen und Blob-Ränder mit Live-CSS-Output

Kurzschreibweise und Langschreibweise

Die Kurzschreibweise border-radius setzt alle Ecken gleichzeitig. Die Langschreibweisen setzen einzelne Ecken: border-top-left-radius, border-top-right-radius usw.

8-Wert-Syntax fuer asymmetrische Formen

Die 8-Wert-Syntax verwendet einen Schraegstrich zum Trennen horizontaler und vertikaler Radien: border-radius: Ah Bh Ch Dh / Av Bv Cv Dv.

Kostenloses Tool Box Shadow Generator Erstelle geschichtete CSS Box Shadows mit Live-Vorschau

Kreise und Pillen erstellen

Fuer einen Kreis: setze border-radius: 50% auf ein quadratisches Element. Fuer eine Pille: setze border-radius: 9999px auf ein rechteckiges Element.

Blob-Formen-Technik

Blob-Formen verwenden die 8-Wert-Syntax mit asymmetrischen Werten: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%.

UI-Design-Muster

Gaengige border-radius Muster: 4-8px fuer subtile Kartenecken, 12-16px fuer prominente Karten, 50% fuer Avatar-Kreise, 9999px fuer Chips und Abzeichen.

Kostenloses Tool Glassmorphism Generator Erstelle mattglas UI-Effekte mit CSS backdrop-filter

Haeufig gestellte Fragen

Was ist der Unterschied zwischen border-radius: 50% und 100%? +
Fuer quadratische Elemente erzeugen beide einen Kreis. Werte ueber 50% werden von Browsern als 50% behandelt.
Kann ich border-radius mit Prozentwerten verwenden? +
Ja. Prozentwerte sind relativ zu den Elementabmessungen.
Was ist der Schraegstrich in der border-radius-Syntax? +
Der Schraegstrich trennt horizontale Radien (davor) von vertikalen Radien (danach).
Wie erstelle ich eine Blob-Form in CSS? +
Verwende die 8-Wert-border-radius-Syntax: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%.
Beeinflusst border-radius Kindelemente? +
border-radius schneidet Kindelemente ab, wenn overflow: hidden auf dem Elternelement gesetzt ist.
Kann ich border-radius animieren? +
Ja, border-radius ist vollstaendig animierbar mit CSS transition und animation.
Welcher border-radius-Wert erstellt eine Pillenform? +
border-radius: 9999px erstellt eine Pillenform auf jedem rechteckigen Element.