CSS Border-Radius: Von Grundlagen bis zu organischen Formen

Border-Radius verstehen

Die CSS-Eigenschaft border-radius rundet die Ecken eines Elements ab. In ihrer einfachsten Form nimmt sie einen einzelnen Wert entgegen: border-radius: 8px erzeugt gleichmaessig abgerundete Ecken an allen vier Seiten. Dieser einzelne Wert hat das Erscheinungsbild moderner Webseiten grundlegend veraendert — scharfe Ecken wirken heute veraltet.

Die Eigenschaft akzeptiert Laengeneinheiten (px, em, rem) und Prozentwerte. Ein border-radius von 50% auf einem quadratischen Element erzeugt einen perfekten Kreis. Auf einem rechteckigen Element erzeugt 50% eine Ellipse. Diese Unterscheidung ist wichtig fuer responsive Designs, bei denen sich die Elementgroesse aendert.

Die Kurzschreibweise beherrschen

Border-radius unterstuetzt bis zu vier Werte in der Kurzschreibweise, die im Uhrzeigersinn angewendet werden:

• Ein Wert: border-radius: 10px — alle vier Ecken gleich.
• Zwei Werte: border-radius: 10px 20px — oben-links/unten-rechts und oben-rechts/unten-links.
• Drei Werte: border-radius: 10px 20px 30px — oben-links, oben-rechts/unten-links, unten-rechts.
• Vier Werte: border-radius: 10px 20px 30px 40px — jede Ecke einzeln im Uhrzeigersinn.

Fuer asymmetrische Designs koennen Sie auch die Langform verwenden: border-top-left-radius, border-top-right-radius und so weiter. Die Langform ist lesbarer, wenn nur eine oder zwei Ecken angepasst werden sollen.

Elliptische Radien fuer organische Formen

Die wahre Staerke von border-radius zeigt sich bei elliptischen Werten. Mit der Schreibweise border-radius: 50px / 25px definieren Sie horizontale und vertikale Radien getrennt. Der Schraegstrich trennt die horizontalen Werte von den vertikalen.

Diese Technik erzeugt organische, blob-artige Formen, die in modernem Webdesign beliebt sind. Werte wie border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% erzeugen asymmetrische, natuerlich wirkende Formen fuer Hintergrund-Elemente oder dekorative Akzente.

Experimentieren Sie mit verschiedenen Kombinationen, um einzigartige Formen zu finden. Kleine Aenderungen an den Prozentwerten koennen das Erscheinungsbild drastisch veraendern.

Gaengige Design-Muster

• Pillenform: border-radius: 9999px auf einem Element mit geringer Hoehe erzeugt die typische Pillenform fuer Buttons und Tags.
• Kartenstil: border-radius: 12px ist der gaengige Wert fuer Card-Komponenten in Material Design.
• Profilbilder: border-radius: 50% auf einem quadratischen Bild erzeugt den klassischen runden Avatar.
• Chat-Blasen: Unterschiedliche Radien an verschiedenen Ecken imitieren Nachrichtenblasen wie in Messenger-Apps.

Border-Radius visuell generieren

Unser Border-Radius-Generator laesst Sie alle acht Werte per Schieberegler einstellen und zeigt das Ergebnis in Echtzeit an. Kopieren Sie den fertigen CSS-Code mit einem Klick in Ihr Projekt. Ideal fuer Designer und Entwickler, die mit organischen Formen experimentieren moechten, ohne Werte manuell zu raten.