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.

Kommentarfunktion für diesen Artikel geschlossen.