Oder ganz einfach: Mach dir die Ecken deiner Boxen so rund wie ein Toastbrot. Dass das wohl nicht immer so einfach ist, wie es sich anhört, wird der ein oder andere schon gemerkt haben. Ich war eigentlich wieder einmal zufällig auf dieses Thema gestossen und habe die besten Lösung einmal rausgesucht.

Nun gut, die gute alte Methode, das Ganze mit Bildern zu realisieren bleibt wohl immer die Beste, aber wohl nicht die Konfortabelste. Immerhin kann jeder gängige Browser Bilder anzeigen. Mit den CSS Methoden ist das schon etwas anders. Hier hat praktisch jeder Browser seinen eigenen Willen, auf jeden Fall bis sich CSS3 mal durchsetzt und jeder Browser mit dem gleich Befehl ansprechbar ist. Wie auch immer, auch für das gibt es Lösungen.

Die Mitspieler

Die Anzahl der Browser, die abgerundete Ecken per CSS unterstützen ist relativ klein: Opera ab 9.5, Firefox ab 3.1a, Konqueror und Safari, der schon früh gelernt hat mit weichen Kanten umzugehen.

Nun muss man aber für praktisch jeden dieser Browser ein Attribut setzen. Das sieht dann in etwa so aus:

.meineKlasse {
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
}
Der Webkit Befehl ist zur Interpretation der abgerundeten Ecken für Safari und Opera. Moz, errät man schon fast, ist alleine für Mozilla und KHTML für Konqueror. Dabei wird die KHTML Methode wohl am meisten kompatibel zu CSS3 sein, laut aussagen.

In CSS3 gäbe es übrigens noch eine weitere Methode, mit Bildern zu arbeiten. Mit einem Befehl ist es nun möglich, mehrere Bilder innerhalb einer DIV zu positionieren. So könnte man sich schnell 4 Ecken rendern und als Bild auf die vier Ecken des DIVS zuweisen.