Leider können immer noch nicht in alle aktuellen Browser abgerundete Ecken per CSS dargestellt werden, das aufwändige Erstellen von verschiedenen ineienander verschachtelten DIVs mit den entsprechenden Grafiken entfällt somit noch nicht vollends. Wer aber damit leben kann, dass runde Ecken nicht in allen Browsern dargestellt werden, kann die einfache CSS-Variante einsetzen.

In Firefox (Mozilla) erreicht man das über

-moz-border-radius: 10px;

oder

-moz-border-radius: 10px 0px 5px 15px;

wobei dann die Angaben von oben links im Uhrzeigersinn angewendet werden.

In Safari lautet der passende Eintrag in der CSS

-khtml-border-radius:10px;

Sollen die Ecken verschiedene Eckradien aufweisen, wird es allerdings etwas umständlicher

-khtml-border-top-left-radius:10px;
-khtml-border-top-right-radius:0px;
-khtml-border-bottom-right-radius:5px;
-khtml-border-bottom-left-radius:15px;

Der InternetExplorer in Version 7 wie auch 8 und auch der Opera in der Version 9 und 10 kennen keine abgerundeten Ecken per CSS. Wer die runden Ecken also zwingend auch in diesen beiden Browsern benötigt, kommt um die leidigen CSS-Konstrukte mit Hintergrundbildern nicht herum...