Runde Ecken im IE7, IE8, IE9, Firefox, Safari und Opera

Es gibt gefühlte 100 verschiedene Möglichkeiten wie Ihr Runde Ecken (border-radius) im IE7, IE8, IE9, Firefox, Safari und Opera eingebaut bekommt. Ich habe auf jeden Fall ein paar ausprobiert und habe ziemlich lange nach Lösungen gesucht. Welche nun bei mir funktioniert hat, war die Anleitung mit JavaScript und CSS von curvycorners.net

Hier wir mit einer JavaScript Datei die Ecken auch im Internet Explorer 7, 8 und 9 richtig angezeigt. Was mir bei Beispielen mit der .htc Datei nie gelungen ist.
Ladet Euch dazu das 2.1 Pack runter: http://www.curvycorners.net/

Bindet dazu die curvycorners.src.js in Euren <head> ein:
<script type=“text/javascript“ src=“/js/curvycorners.src.js“> </script>

Dann müsst Ihr dazu noch die wichtigen Radius-Einstellungen einbinden:

<script type=“text/JavaScript“>
  addEvent(window, ‚load‘, initCorners);
  function initCorners() {
    var settings = {
      tl: { radius: 7 },
      tr: { radius: 7 },
      bl: { radius: 7 },
      br: { radius: 7 },
      antiAlias: true
    }
    curvyCorners(settings, „.meineclassname .classname“);
  }
</script>

„radius: 7“ wäre dann der Border-Radius!
Um weitere Klassen oder ID´s anzusprechen, müsst Ihr nur die „curvyCorners(settings, „.anythingSlider .panel“);“ kopieren:

…….
antiAlias: true
    }
    curvyCorners(settings, „.meineclassname .classname“);
    curvyCorners(settings, „.meineclassnamezwei“);
    curvyCorners(settings, „#hiermeinIDname“);
  }
</script>
……

Nun noch das CSS für alle weiteren Browser anlegen:

border: none;
-moz-border-radius:7px; /* Firefox */
-webkit-border-radius:7px; /* Safari, Chrome */
-khtml-border-radius:7px; /* Konqueror */
-o-border-radius: 7px; /* Opera */
border-radius:7px; /* CSS3 */

Habe Euch als Kommentar die Browser eingetragen!

Eure Erfahrungen wäre mir mal wichtig, da ich bisher nur im Browsermodus testen konnte.
Ihr könnt mir gerne als Kommentar schreiben in welchen Browsern es funktioniert. DANKE!

Eure Meinung zu dem Artikel ist gefragt! Schreibt mir ein Kommentar

Hat Euch der Artikel weitergeholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!

Hat Euch der Artikel weitergeholfen oder gefallen? Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!Ich bin freiberuflicher TYPO3-Entwickler, Web-Entwickler und Frontend-Entwickler. Ich arbeite im und für das Web etwas mehr als 12 Jahre. Mehr Infos zu der TYPO3 Internetagentur - INGENIUMDESIGN.

Leave a Reply

Next ArticleTYPO3 - Title, Titel, Headlines, Menü Sonderzeichen entfernen