CSS: Abgerundete Ecken in allen Browsern darstellen
Zwischendurch gibt es wieder einen kleinen Tipp für CSS-Gestaltung und alltägliche Webdesign-Probleme: Abgerundete Ecken können einem Design ein eleganteres Gesamtbild verleihen oder den Charakter einer Website freundlicher erscheinen lassen. Apple dürfte sowohl mit seiner Internetseite als auch mit seinen Produkten ein wegweisender Repräsentant dieses Stilmittels sein.
Moderne Webbrowser und auch CSS3 unterstützen ein Attribut, mit dem sich runde Ecken auf HTML-Elemente anwenden lassen. Ein Beispiel:
- .abgerundet {
- -moz-border-radius:10px; /* Firefox */
- -webkit-border-radius:10px; /* Safari, Chrome */
- -khtml-border-radius:10px; /* Konqueror */
- border-radius:10px; /* CSS3 */
- }
Leider funktioniert dieser kleine Effekt in Microsofts Internet Explorer nicht. Abhilfe schafft beispielsweise das HTC-Skript CSS Curved Corner, das einfach mit der folgenden Zeile die Einstellungen für den Internet Explorer aktiviert:
- .abgerundet {
- behavior:url(border-radius.htc);
- }
Das Skript überprüft, ob eine border-radius-Deklaration (wie oben im Beispiel gezeigt) vorhanden ist und wendet dieses Attribut auf das entsprechende Element an, so dass es auch in Internet Explorer korrekt dargestellt wird. Der Autor bietet eine fertige Demo-Seite zum Download an, die den Effekt des Skripts darstellt.
Kommentare
Ah, dafür gibts ein .htc-Script?
Morgen mal testen, danke für den Hinweis!
http://code.google.com/p/curved-corner/downloads/list
echt nice –thx
Hi,
netter Beitrag! :) Aber geht das auch im 6er IE?
Hier wird eine Möglichkeit ohne Sonderbefehle wie
moz* vorgestellt:http://www.net-developers.de/blog/2010/01/17/runde-ecken-in-css-fur-alle-browser-auch-ie/
Das funktioniert auch im IE, grad getestet.
MfG
Simon
CSS Curved Corner funktioniert auch in Internet Explorer 6. Das Skript generiert Elemente mit der VML-Technik, die in allen Internet Explorern funktioniert.
Die von Dir beschriebene Möglichkeit ist auch interessant und benötigt kein JavaScript. Danke für die Info! :-)