Abgerundete Ecken werfen ihren Schatten voraus. In Firefox und Webkit-basierten Browsern (Chrome und Safari) funktionieren sie schon, aber unterschiedlich. Und das ist Nervkram.

Zuerst muss definiert werden, dass überhaupt eine Border angezeigt wird. Sagen wir mal, dass alle Elemente mit der Klasse rundjetzt Runde Ecken haben sollen:

.rundjetzt { border: 1px solid black; }

Jetzt definieren wir abgerundete Ecken für Firefox:

.rundjetzt { -moz-border-radius: 5px; }

Und jetzt für Webkit:

.rundjetzt { -webkit-border-radius: 5px; }

Bis jetzt ist es quasi gleich. Wenn man nur eine Ecke definieren will, wird es komplizert. Mozilla verwendet folgende Syntax:

-moz-border-radius-topleft
-moz-border-radius-bottomright

Webkit hingegen hätte gerne:

-webkit-border-top-left-radius
-webkit-border-bottom-right-radius

Naja, besser so komisch unterschiedlich benutzen können, als gar nicht benutzen können wie z.B. im Internet Explorer im Opera.