Hübscher als klobig-kantige Ecken sind sie allemal: abgerundete Ecken, die etwa bei Div-Boxen oder Eingabefeldern eingesetzt werden können. Wie aber realisiert man sie?

früher: Hintergrundgrafiken

In der Vergangenheit musste man hierfür auf entsprechende Hintergrundgrafiken zurückgreifen. Da sind dann teilweise wirklich abenteuerliche Konstrukte aus diversen kunterbunt verschachtelten Divs entstanden, nur um eine einzige Box mit abgerundeten Ecken zu erzeugen.
Also ziemlich umständlich und Gift für einen schlanken Quellcode.

heute: CSS 3

Mittlerweile lassen sich abgerundete Ecken elegant mit CSS umsetzen – CSS 3 bringt da mit border-radius neue Möglichkeiten ins Spiel:
border-radius: 9px;
Der Pixelwert bestimmt, wie stark die Rundung ausfallen soll.

browserspezifische Ergänzungen

Allerdings funktioniert dies nicht in allen Browsern, da CSS 3 noch kein offizieller Standard ist. Viele Browserhersteller haben sich aber dennoch bereits dazu entschlossen, die neuen Elemente zu implementieren – noch muss man diese aber browserspezifisch ansprechen.
Daher sollte man folgende Angaben ergänzen:
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz wirkt sich auf Firefox und Seamonkey aus, -webkit gilt für Webkit-basierte Browser wie den Safari, Konqueror und Google Chrome.
Im Internet Explorer werden abgerundete Ecken voraussichtlich erst ab Version 9 unterstützt.

einzelne Ecken ansprechen

Obige Variante verpasst allen vier Ecken eines Elements Rundungen. Aber selbstverständlich kann man die Ecken auch einzeln ansprechen – die Syntax fällt hier je nach Browser etwas anders aus:

obere linke Ecke

border-top-left-radius
-moz-border-radius-topleft
-webkit-border-top-left-radius

obere rechte Ecke

border-top-right-radius
-moz-border-radius-topright
-webkit-border-top-right-radius

untere rechte Ecke

border-bottom-right-radius
-moz-border-radius-bottomright
-webkit-border-bottom-right-radius

untere linke Ecke

border-bottom-left-radius
-moz-border-radius-bottomleft
-webkit-border-bottom-left-radius

gibt’s da nicht was von jQuery?

Last but not least gibt es übrigens auch sehr schicke Ecken-Lösungen mit jQuery, die ihr euch hier ansehen könnt. Diese haben natürlich den Nachteil, dass sie bei Besuchern mit abgeschaltetem JavaScript nicht angezeigt werden.
Sofern ihr nicht ohnehin jQuery verwendet, ist die Frage, ob ihr für einen einzigen Effekt tatsächlich ein ganzes Framework einbinden wollt.