border-radius

Zuletzt aktualisiert am 15. Februar 2026

border-radius rundet die Ecken eines Elements ab. Die Eigenschaft wirkt auf den gesamten Hintergrund, den Border und den Schatten eines Elements. Du brauchst keinen sichtbaren Border, damit border-radius funktioniert. Hintergrundfarben und Bilder werden ebenfalls an den Ecken abgeschnitten. Mit der Shorthand-Eigenschaft kontrollierst du alle vier Ecken auf einmal.

Grundlagen

border-radius akzeptiert einen oder mehrere Werte in Pixel, rem oder Prozent. Prozentwerte beziehen sich auf die entsprechende Dimension des Elements: horizontale Radien auf die Breite, vertikale Radien auf die Höhe.

Eine Besonderheit: Wenn die Summe benachbarter Radien größer ist als die Seitenlänge, reduziert der Browser alle Radien proportional, damit sie zusammenpassen. Du kannst also bedenkenlos große Werte wie 9999px verwenden, ohne dass etwas kaputtgeht.

Syntax & Werte

Shorthand-Notation

Die Shorthand-Eigenschaft akzeptiert 1 bis 4 Werte. Die Reihenfolge beginnt oben links und geht im Uhrzeigersinn:

1. border-radius: 8px: alle vier Ecken gleich
2. border-radius: 8px 0: oben-links/unten-rechts | oben-rechts/unten-links
3. border-radius: 8px 0 16px: oben-links | oben-rechts/unten-links | unten-rechts
4. border-radius: 8px 0 16px 4px: oben-links | oben-rechts | unten-rechts | unten-links

Beispiele

Verschiedene Rundungen

.r-small { border-radius: 4px; }
.r-medium { border-radius: 12px; }
.r-large { border-radius: 24px; }
.r-full { border-radius: 9999px; }

<div class="box r-small">4px</div>
<div class="box r-medium">12px</div>
<div class="box r-large">24px</div>
<div class="box r-full">9999px (Pille)</div>

Kreise und Pillenformen

Mit border-radius: 50% auf einem quadratischen Element entsteht ein Kreis. Bei einem rechteckigen Element mit großem Radius entsteht eine Pillenform.

/* Quadratisches Element → Kreis */
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #1a56db;
}

/* Rechteckiges Element → Pille */
.pill {
  padding: 10px 28px;
  border-radius: 9999px;
  background: #059669;
}

<div class="circle">Kreis</div>
<span class="pill">Pillenform</span>

Einzelne Ecken stylen

Du kannst jede Ecke individuell runden. Das ist nützlich für Tabs, Cards mit nur oben gerundeten Ecken oder dekorative Formen.

.tab {
  padding: 10px 20px;
  background: #1a56db;
  color: white;
  border-radius: 8px 8px 0 0;
}

.content {
  background: #dbeafe;
  padding: 16px;
  border-radius: 0 8px 8px 8px;
}

<div>
<span class="tab">Aktiv</span>
<span class="tab-inactive">Tab 2</span>
<span class="tab-inactive">Tab 3</span>
</div>
<div class="content">Inhalt des aktiven Tabs</div>

Elliptische Radien

Mit der Syntax border-radius: horizontal / vertikal erstellst du elliptische Rundungen statt kreisrunder. Das ermöglicht organische, fließende Formen.

.elliptic {
  border-radius: 50% / 30%;
  background: #ede9fe;
}

.blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  background: #fef3c7;
}

<div class="elliptic">Elliptisch</div>
<div class="blob">Blob-Form</div>

Barrierefreiheit

border-radius hat keinen direkten Einfluss auf die Barrierefreiheit, da es rein dekorativ ist. Trotzdem gibt es eine Falle: Sehr große Radius-Werte können Inhalt an den Ecken abschneiden, besonders wenn overflow: hidden gesetzt ist. Achte darauf, dass Text oder interaktive Elemente nicht durch die Rundung unerreichbar werden. Teste deine gerundeten Elemente bei verschiedenen Zoom-Stufen, um sicherzustellen, dass nichts abgeschnitten wird.

Häufige Fehler

• border-radius: 50% ohne gleiches Seitenverhältnis: Bei einem Rechteck entsteht kein Kreis, sondern eine Ellipse. Für einen echten Kreis braucht das Element gleiche Breite und Höhe.
• Gerundete Ecken werden abgeschnitten: Wenn ein Kind-Element über die gerundeten Ecken hinausragt, brauchst du overflow: hidden auf dem Elternelement.
• Zu kleine Radien bei kleinen Elementen: Ein border-radius: 20px auf einem 30px hohen Element sieht anders aus als erwartet. Passe den Radius an die Elementgröße an.
• Reihenfolge der Ecken verwechseln: Die Shorthand-Reihenfolge beginnt oben links und geht im Uhrzeigersinn: oben-links, oben-rechts, unten-rechts, unten-links. Das unterscheidet sich von margin und padding, die oben beginnen.
• border-radius mit border-collapse: collapse bei Tabellen: Gerundete Ecken funktionieren nicht bei kollabierten Tabellen-Borders. Verwende border-collapse: separate und border-spacing: 0.

Browser-Kompatibilität

border-radius wird von allen modernen Browsern vollständig unterstützt, einschließlich elliptischer Radien.

Email-Kompatibilität

border-radius ist in den meisten Email-Clients gut unterstützt, mit Ausnahme von Outlook.

Verwandte Eigenschaften