border-radius

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.

Steckbrief border-radius

Syntax: border-radius: <length> | <percentage>
Initialwert: 0
Vererbt: Nein
Animierbar: Ja
Kurzform für: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

Kategorie: Box-Modell
Werte: 3
Beispiele: 4
Browser: 5 von 5
E-Mail: 4 von 5
Stand: 15.02.2026

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

3 Werte

Wert	Beschreibung	Beispiel
`<length>`	Fester Radius in einer CSS-Einheit.	border-radius: 8px
`<percentage>`	Prozentualer Radius, bezogen auf die Elementgröße.	border-radius: 50%
`0`	Keine Rundung (eckig).	border-radius: 0

Shorthand-Notation

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

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

Beispiele

4 Beispiele

Verschiedene Rundungsstärken

.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>

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

Kreis und 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>

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

Tabs mit gerundeten oberen Ecken

.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>

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

Elliptische Radien

.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

5 Fehler

01 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.

02 Gerundete Ecken werden abgeschnitten

Wenn ein Kind-Element über die gerundeten Ecken hinausragt, brauchst du overflow: hidden auf dem Elternelement.

03 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.

04 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.

05 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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

4 von 5

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

Apple Mail

Komplett
Gmail

Komplett
Outlook

Keine

Outlook ignoriert border-radius komplett. Für runde Buttons in Outlook: VML verwenden.
Thunderbird

Komplett
Yahoo Mail

Komplett

Steckbrief border-radius

Syntax: border-radius: <length> | <percentage>
Initialwert: 0
Vererbt: Nein
Animierbar: Ja
Kurzform für: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

Kategorie: Box-Modell
Werte: 3
Beispiele: 4
Browser: 5 von 5
E-Mail: 4 von 5
Stand: 15.02.2026

Inhalt

7 Kapitel

Verwandt

border overflow

Üben /lernen/css

Im CSS-Kurs gestaltest du echte Seiten selbst und prüfst jede Aufgabe direkt im Browser.

Zum CSS-Kurs

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da