Border Radius für alle gängige Browser (Crossbrowser)

Einer der schmerzlichen Geschichten, bei der HTML Erstellung sind gerundete Ecken. In letzter Zeit beginnt sich die Situation langsam zu verbessern und die Browser unterstützen diese beliebten CSS-Eigenschaften. FF, Safari, Chrome machen es durch ihre Eigenschaften mit spezifischen Präfixen, – Opera bald auch ohne das Präfix. Wie immer steht auf der Seite bei uns Internet Explorer.

Glücklicherweise kann man IE mit seinen eigenen Mitteln besiegen. Einer meiner Lieblings-Lösungen auf Basis von VML und verbessert – curved-corner. Wir kopieren einfach border-radius.htc, zu unserer CSS Datei und verwenden den folgenden Code:

.my-block {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
-khtml-border-radius: 10px; /* KHTML */
border-radius: 10px; /* CSS3 */
 /* für IE */
behavior: url(border-radius.htc);
/* bringen wir dem IE border-radius auch bei*/
}

Viel Spaß mit runden Ecken.