201010Jan

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.

CSS Curved Corner

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

Michel Balzer schrieb am 11.01.2010 #1

Ah, dafür gibts ein .htc-Script?

Morgen mal testen, danke für den Hinweis!

Jonas schrieb am 12.01.2010 #2

http://code.google.com/p/curved-corner/downloads/list

Don schrieb am 12.01.2010 #3

echt nice –thx

simon schrieb am 17.01.2010 #4

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

Matthias schrieb am 18.01.2010 #5

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! :-)