CSS Border-Radius-Generator: Abgerundete Ecken ohne Rätselraten

border-radius ist einer jener CSS-Properties, bei denen man denkt: schon verstanden — und dann merkt man nach Monaten, dass man nur an der Oberfläche gekratzt hat. Ein border-radius: 8px rundet die Ecken ab, ja. Aber dasselbe Property erzeugt auch perfekte Kreise, fließende Blob-Formen und sogar animierte Morphing-Effekte.

Dieser Leitfaden führt Sie durch alles, was Sie über border-radius wissen müssen — von Grundlagen bis zu fortgeschrittenen Techniken — und zeigt, wie der CSS Border-Radius-Generator Ihnen stundenlange Tüftelei erspart.

Was ist border-radius?

border-radius rundet die Ecken eines HTML-Elements ab. Unter der Haube definiert es für jede der vier Ecken einen horizontalen und einen vertikalen Radius — bis zu acht Werte insgesamt.

Die Grundsyntax ist simpel:

/* Alle vier Ecken gleich */
.element {
  border-radius: 8px;
}

/* Zwei Werte: oben/unten und links/rechts */
.element {
  border-radius: 8px 16px;
}

/* Vier Werte: oben-links, oben-rechts, unten-rechts, unten-links */
.element {
  border-radius: 8px 16px 24px 4px;
}

/* Einzelne Ecken */
.element {
  border-top-left-radius: 8px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 24px;
  border-bottom-left-radius: 4px;
}

Die Reihenfolge der vier Werte folgt dem Uhrzeigersinn, beginnend oben links.

px oder %: Der entscheidende Unterschied

Ob Sie px oder % verwenden, macht einen erheblichen Unterschied — besonders wenn Sie spezifische Formen erstellen möchten.

Pixelwerte: Vorhersehbar und konstant

.btn {
  border-radius: 6px; /* Immer 6px, egal wie groß der Button ist */
}

Pixelwerte eignen sich gut für:

Buttons und Eingabefelder
Karten und Container
Badges und Tags
Überall dort, wo die Rundung unabhängig von der Elementgröße bleiben soll

Prozentwerte: Relativ zur Elementgröße

/* Perfekter Kreis bei gleicher Breite und Höhe */
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

/* Ellipse bei unterschiedlicher Breite und Höhe */
.ellipse {
  width: 200px;
  height: 80px;
  border-radius: 50%;
}

Der Prozentwert bezieht sich auf die Abmessungen des Elements selbst: die horizontalen Radien auf die Breite, die vertikalen auf die Höhe. Deshalb wird ein Quadrat mit border-radius: 50% zum Kreis, aber ein Rechteck zur Ellipse.

Häufige Anwendungsfälle

Buttons mit verschiedenen Stilen

Die Rundung eines Buttons kommuniziert Persönlichkeit:

/* Scharf: Nüchtern, professionell */
.btn-sharp { border-radius: 0; }

/* Leicht gerundet: Modern, freundlich */
.btn-subtle { border-radius: 4px; }

/* Deutlich gerundet: Spielerisch */
.btn-rounded { border-radius: 10px; }

/* Pill-Form: Trendig, call-to-action */
.btn-pill { border-radius: 9999px; }

Warum 9999px statt 50% für Pill-Buttons? Bei einem breiten Button mit border-radius: 50% entstehen deutliche Ellipsen an den Ecken statt der gewünschten Kapselform. Ein großer px-Wert ist der einfachste Weg, immer eine saubere Pill-Form zu erzielen, unabhängig vom Seitenverhältnis.

Karten und Panel-Komponenten

.card {
  border-radius: 12px;
  overflow: hidden; /* Wichtig: verhindert, dass Bilder aus den Ecken herausragen */
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

overflow: hidden wird beim Designen von Karten häufig vergessen. Ohne diesen Wert zeigt das Element zwar abgerundete Ecken, aber ein inneres <img>-Element behält seine rechteckigen Ecken und ragt optisch heraus.

Teilweise gerundete Ecken

Für UI-Elemente wie Tabs oder Dropdown-Menüs:

/* Tab: nur oben abgerundet */
.tab {
  border-radius: 8px 8px 0 0;
}

/* Dropdown: nur unten abgerundet */
.dropdown-menu {
  border-radius: 0 0 8px 8px;
}

/* Sprechblase: eine Ecke scharf */
.tooltip {
  border-radius: 8px 8px 8px 0;
}

Organische Formen: Die Slash-Syntax

Jetzt wird es interessant. border-radius unterstützt eine erweiterte Syntax, bei der horizontale und vertikale Radien getrennt angegeben werden:

/* Syntax: horizontale_radien / vertikale_radien */
.blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

Vor dem Schrägstrich stehen die horizontalen Radien der vier Ecken (oben-links, oben-rechts, unten-rechts, unten-links). Nach dem Schrägstrich die vertikalen Radien in derselben Reihenfolge.

Diese Kombination aus acht Werten ermöglicht asymmetrische, organisch wirkende Formen — die sogenannten "Blobs", die in modernem Webdesign omnipräsent sind.

Acht Werte manuell zu finden ist mühsam. Der CSS Border-Radius-Generator löst dieses Problem: Schieberegler in Echtzeit anpassen, Vorschau sofort sehen, CSS-Code kopieren.

/* Verschiedene Blob-Varianten */
.blob-1 { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
.blob-2 { border-radius: 50% 50% 30% 70% / 40% 60% 50% 50%; }
.blob-3 { border-radius: 70% 30% 50% 50% / 60% 40% 60% 40%; }

Animation: border-radius in Bewegung

Einer der unterschätzten Aspekte von border-radius ist seine Animierbarkeit. Die Werte lassen sich fließend interpolieren.

Einfacher Hover-Übergang

.btn {
  border-radius: 4px;
  transition: border-radius 0.25s ease;
  background: #3b82f6;
  color: white;
  padding: 10px 20px;
}

.btn:hover {
  border-radius: 16px;
}

Dieser subtile Effekt macht Buttons lebendiger, ohne aufdringlich zu wirken.

Blob-Morphing-Animation

@keyframes morphBlob {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  25% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  50% {
    border-radius: 50% 50% 40% 60% / 40% 50% 60% 50%;
  }
  75% {
    border-radius: 40% 60% 50% 50% / 60% 40% 50% 40%;
  }
}

.animated-blob {
  width: 250px;
  height: 250px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  animation: morphBlob 8s ease-in-out infinite;
}

Dieser Effekt ist bei Landing Pages sehr beliebt und verleiht Seiten eine organische, lebendige Qualität.

Quadrat-zu-Kreis-Transition

.shape {
  width: 100px;
  height: 100px;
  background: #f59e0b;
  border-radius: 8px;
  transition: border-radius 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.shape.is-circle {
  border-radius: 50%;
}

Die cubic-bezier-Kurve mit Overshoot (dem Wert über 1) erzeugt einen federnden Effekt bei der Formänderung.

border-radius im Design-System

In größeren Projekten empfiehlt sich die Verwaltung von Rundungswerten über CSS Custom Properties:

:root {
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;
}

/* Komponenten nutzen Tokens */
button          { border-radius: var(--radius-sm); }
.card           { border-radius: var(--radius-lg); }
.avatar         { border-radius: var(--radius-full); }
input, textarea { border-radius: var(--radius-md); }
.tag            { border-radius: var(--radius-full); }

Wenn Sie das Design-System später anpassen wollen — z.B. von scharfen zu weicheren Ecken wechseln — ändern Sie nur die Variablenwerte. Alle Komponenten aktualisieren sich automatisch.

In Tailwind CSS entspricht dies den rounded-*-Klassen, die dasselbe Konzept implementieren.

Performance-Hinweise

border-radius ist eine günstige CSS-Property im Hinblick auf Rendering-Performance — sofern Sie sie nicht auf Elemente anwenden, die häufig ihre Größe ändern. Die Berechnung der Radien löst zwar Layout-Berechnungen aus, ist aber bei statischen Elementen kein Problem.

Bei animierten Blobs: border-radius-Animationen laufen auf dem GPU-Compositor und sind deutlich günstiger als das Animieren von width, height oder margin. Für fließende 60fps-Animationen mit Formänderungen ist border-radius in Kombination mit transform eine gute Wahl.

Browser-Kompatibilität

border-radius wird von allen modernen Browsern vollständig unterstützt. Die Slash-Syntax ist ebenfalls seit Jahren breit verfügbar. Für aktuelle Projekte gibt es keinerlei Kompatibilitätsprobleme.

Fazit

border-radius ist mehr als ein Property für "etwas weniger eckig". Mit dem richtigen Verständnis eröffnet es eine breite Palette an Gestaltungsmöglichkeiten:

4-8px für subtile Button- und Eingabefeld-Rundungen
12-16px für moderne Karten und Modal-Dialoge
9999px für Pill-Buttons und Tag-Elemente
50% für Kreise und Ellipsen
Slash-Syntax + % für organische Blob-Formen
Kombiniert mit transition/animation für lebendige Morphing-Effekte

Statt Werte manuell auszuprobieren, nutzen Sie den CSS Border-Radius-Generator — besonders für die komplexen Slash-Syntax-Kombinationen, bei denen acht Werte gleichzeitig stimmen müssen. Der Generator zeigt Ihnen live, wie die Form aussieht, und liefert fertigen CSS-Code zum Kopieren.