In der Praxis sind mit CSS abgerundete Rahmen bisher nur mit
-moz-border-radius möglich.
Weil -moz-border-radius keinem W3C-CSS-Standard entspricht,
sondern proprietäres CSS von Mozilla ist, funktioneren
diese Beispiele bisher nur in Mozilla und in Netscape 6.x/7.0.
Einen runden Rahmen kann man natürlich auch um einen Textblock machen:
-moz-border-radius: 20px;
Ein paar Suchmaschinen:
Google
AllTheWeb
Altavista
Der Rahmen kann auch in allen vier Ecken verschieden sein:
-moz-border-radius: 0px 5px 20px 40px;
Ein paar Suchmaschinen:
Google
AllTheWeb
Altavista
Vielleicht wird es mit CSS Level 3 möglich sein, runde Rahmen zu machen. Es gab einen Vorschlag dafür im W3C Working Draft zum CSS Box Model (Version vom 26.07.2001). Später in der Entwicklung von CSS 3 wurde das Aussehen von Rahmen vom Box Model getrennt und ausgegliedert ins CSS3 Module: Borders. Zur Zeit ist es noch in Entwicklung.
Die folgenden Beispiele beruhen auf dem Vorschlag vom 26.07.2001. Sie funktionieren zur Zeit in keinem der mir bekannten Browser.
Alle 4 Ecken gleich abgerundet. { border-radius:25px; }
Ein paar Suchmaschinen:
Google
AllTheWeb
Altavista
Ecken asymmetrisch abgerundet.
border-radius-topleft:35px 25px;
border-radius-topright:35px 25px;
border-radius-bottomright:40px 10px;
border-radius-bottomleft:40px 10px;
Ein paar Suchmaschinen:
Google
AllTheWeb
Altavista
Der "klassische" Weg, Rahmen mit runden Ecken um Objekte zu machen, verwendet HTML-Tabellen und mindestens 4 Bilder in den Eck-Zellen.
Wie man das macht, ist z.B. auf folgenden Seiten beschrieben:
http://www.yourhtmlsource.com/tables/roundedcorners.html
http://www.htmlgoodies.com/tutorials/tables/article.php/3479841
http://www.spacedust.com/scripts/rounded_table/
http://www.freewebmasterhelp.com/tutorials/corners
http://www.sitepoint.com/article/trick-rounded-corner-tables
Schon etwas "sauberer" ist meine Variante, wo alle Rahmen-Bilder mit CSS als Hintergrund-Bilder der ansonsten fast leeren Rahmen-Zellen verwendet werden, siehe Liste aller Rahmen-Testseiten.
Es gibt auch Lösungen mit CSS ohne Tabellen, dafür
mit extrem vielen verschachtelten DIV-Elementen:
http://andreas-kalt.de/webdesign/tutorials/runde_ecken.htm
http://www.alistapart.com/articles/slidingdoors/
http://www.sovavsiti.cz/css/corners.html
Bild: Ferdinand Hodler. Bildquelle: visipix.com
Thomas Lüthi, luthi@my-mail.ch, 07.04.2007