Neues von CSS3 und abgerundeten Ecken

Info: Dieser Artikel war eine Vorschau auf die Möglichkeiten von abgerundeten Ecken in CSS3.

Ein aktuelles Tutorial über den nun tatsächlich eingeführten Standard für runde Ecken findest du hier.

Am neuen Standard für CSS3 wird ja im W3C schon eine ganze Weile entwickelt und immer mal wieder gibt es Auszüge aus dem aktuellen Stand der Entwicklung, so genannte "Working Drafts" oder frei übersetzt "Arbeitspapiere".

Ein Solches hat die CSS Workgroup gestern bezüglich CSS3 veröffentlicht. Die neue CSS-Version lässt ja seit sie diskutiert wird die Herzen der Websetzer hoch gehen, so auch Meines das gerade im neuen Draft von den angepeilten Fähigkeiten der abgerundeten Ecken angetan ist.

Firefox kann ja mit -moz-border-radius bereits runde Ecken darstellen, dank der neuen Render-Engine werden die jetzt auch schön glatt angezeigt, und nicht mehr so angenagt (pixelig) wie noch im FF2. Im Moment kann man zum Beispiel mit

-moz-border-radius: 10px 5px 9px 7px

eine Box mit vier runden Ecken definieren, wo jede runde Ecke somit einen anderen Radius erhält, also die Rundungen unterschiedlich groß werden.

Die CSS-WG geht jetzt aber noch einen Schritt weiter: Sie will es nicht nur ermöglichen jede der vier Ecken einer Box unterschiedlich abzurunden, jede Abrundung selbst soll zusätzlich noch die Möglichkeit erhalten unterschiedlich hoch und breit zu sein. Dadurch kann die Rundung der Ecke nicht nur mehr ein exakter Kreis mit dem angegebenen Radius sein, sondern auch gedehnt oder gestaucht wirken, also elliptisch:

Welche neuen Möglichkeiten sich dadurch auftun zeigen folgende grafischen Beispiele aus dem besagten Draft:

Und hier noch der Link zum Working Draft: http://www.w3.org/TR/css3-background/#the-border-radius

Nachtrag 20.03.2010
Webkit kann über -webkit-border-radius auch schon längst runde Ecken darstellen und damit Safari4 und Google Chrome. IE und Opera: im Moment noch keine Chance.