Abgerundete Ecken mit CSS: von vier Eckgrafiken zu border-radius

Abgerundete Ecken sind heute eine Selbstverständlichkeit – eine Zeile CSS, fertig. Dass daraus einmal eine der meistdiskutierten Bastelaufgaben im Webdesign wurde, ist kaum noch vorstellbar. Dieser Beitrag stand in seiner ersten Fassung seit 2007 online. Wir haben ihn erhalten, weil er gut zeigt, wie viel Aufwand hinter einem Detail stecken konnte, das heute niemand mehr erwähnt.

Wie man runde Ecken früher gebaut hat

Bis etwa 2010 kannte CSS keine runden Ecken. Wer eine Box mit weichen Kanten wollte, musste sie aus Grafiken zusammensetzen. Die verbreitetste Lösung brauchte vier verschachtelte DIV-Container und vier Eckgrafiken:

<div class="box">
  <div class="box_oben"><img src="ecke_or.gif" alt="" /></div>
  <div class="box_inhalt">Inhalt</div>
  <div class="box_unten"><img src="ecke_ur.gif" alt="" /></div>
</div>

Der Kniff: Die linken Ecken kamen als Hintergrundbild, die rechten als echtes img-Element im Markup – anders ließ sich eine flexible Breite nicht umsetzen.

.box_oben {
  background: #000 url(ecke_ol.gif) left top no-repeat;
  text-align: right;
}
.box_unten {
  background: #000 url(ecke_ul.gif) left top no-repeat;
  text-align: right;
}
.box_inhalt {
  background: #000;
  padding: 0 10px;
}

Was das in der Praxis bedeutete:

• Vier Grafiken pro Box. Bei mehreren Boxfarben vervierfachte sich das entsprechend.
• Die Hintergrundfarbe musste im CSS dreimal gepflegt werden und exakt zur Farbe in den Eckgrafiken passen. Eine Farbänderung hieß: alle Grafiken neu exportieren.
• Drei zusätzliche Elemente im Markup, die inhaltlich nichts bedeuteten – reine Gestaltungshilfen.
• Alle vier Ecken mussten gleich groß sein, sonst verschob sich das Layout.

Es gab auch rein CSS-basierte Verfahren, die ohne Grafiken auskamen – die arbeiteten mit einem Stapel unterschiedlich breiter, ein Pixel hoher Elemente, um die Rundung zu simulieren. Sauberer war das nicht.

Wie es heute geht

Seit CSS3 genügt eine Eigenschaft. Kein Zusatz-Markup, keine Grafiken, keine Farbpflege an drei Stellen:

.box {
  background: #1a1a1a;
  border-radius: 8px;
  padding: 16px;
}

Das Markup schrumpft auf das, was es inhaltlich ist:

<div class="box">Inhalt</div>

Was border-radius alles kann

Die Eigenschaft ist flexibler, als sie auf den ersten Blick wirkt:

/* alle Ecken gleich */
border-radius: 8px;

/* oben 12px, unten 0 - fuer angesetzte Elemente */
border-radius: 12px 12px 0 0;

/* jede Ecke einzeln: oben-links, oben-rechts, unten-rechts, unten-links */
border-radius: 12px 4px 12px 4px;

/* elliptisch: erst alle horizontalen, dann alle vertikalen Radien */
border-radius: 20px / 10px;

/* Kreis oder Pille - der Wert wird automatisch begrenzt */
border-radius: 50%;
border-radius: 9999px;

Zwei Details, die oft übersehen werden

• Verschachtelte Radien. Liegt eine gerundete Box in einer anderen, sollte der innere Radius kleiner sein als der äußere – idealerweise um den Abstand dazwischen. Sonst wirken die Rundungen ungleichmäßig.
• Überstehende Inhalte. Ein Bild in einer gerundeten Box überdeckt die Ecken, solange die Box kein overflow: hidden hat.

Was heute stattdessen die Arbeit macht

Die Technik ist gelöst, die Gestaltungsfrage geblieben – und sie hat sich verschoben. Heute geht es nicht mehr darum, ob man runden kann, sondern um Konsistenz:

• Ein Radius-System statt Einzelwerten. Zwei bis drei feste Stufen, als CSS-Variablen hinterlegt, reichen für die meisten Projekte und halten die Oberfläche ruhig.
• Radius als Bedeutungsträger. Wenn Karten, Eingabefelder und Buttons unterschiedlich stark gerundet sind, sollte das eine Aussage über ihre Rolle sein – nicht Zufall.

:root {
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
}

.card  { border-radius: var(--radius-l); }
.input { border-radius: var(--radius-s); }

Fazit

Von vier Grafiken und drei Hilfselementen zu einer Zeile: Kaum ein Detail zeigt so deutlich, wie viel Handarbeit früher in Selbstverständlichkeiten steckte. Wer heute noch Eckgrafiken in einem Projekt findet, kann sie bedenkenlos entfernen – border-radius wird von jedem relevanten Browser seit über einem Jahrzehnt unterstützt.

Wenn Sie ein älteres Projekt modernisieren möchten, unterstützen wir Sie als Webdesign-Agentur gerne dabei.