Zum einem gibt es da die neuen abgerundeten Ecken, was an sich irgendwie paradox ist, denn das besagte etwas, ist ja dann nicht mehr eckig, sondern halt rund.
Da sollte man überlegen, ob man nicht den Begriff “Runden”, statt “Ecken” einführt.

Aber jetzt zum eigentlichen:

Hier gibt es den CSS3-Code, um alle Ecken abzurunden:

1
2
3
4

-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-bottom-radius: 20px;

Möchte man nur einzelne Ecken abrunden, erweitert man die CSS3 Definition folgendermaßen:

1
2
3
4
5
6
7
8

-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;

Soll zusätzlich noch ein Höheneffekt durch Schatten erzeugt werden, können noch die folgenden CSS3 Eigenschaften hinzugefügt werden.

1
2
3

-webkit-box-shadow: 5px 5px 5px silver;
-moz-box-shadow: 5px 5px 5px silver;
box-shadow: 5px 5px 5px silver;

Die ersten beiden Größenangaben, bestimmen die Position des Schlagschattens, so dürfen hier auch Negative Werte verwendet werden.
Die dritte Größenangabe, gibt die Stärke des Schattens an.

Leider benötigen die unterschiedlichen Browser unterschiedliche Befehle, um den gewünschten Effekt zu erzielen, weshalb alles so gesehen doppelt angegeben werden muss.

Vorteil bei diesen CSS Eigenschaften, wenn der Browser diese nicht kennt, lässt er sie einfach weg. Da diese Elemente keinen großen Einfluss auf das weitere Layout besitzen, stört dieser Umstand noch nicht mal besonders.