Heltblank

jQuery curvycorners

I started using http://www.curvycorners.net/ on a project of mine, but @oliverGristDev mentioned on Twitter the div problem with this solution, and suggested CSS3. But as we all now lte ie 8 dosen’t support that.

To please all this became the solution:

    <!--[if lte IE 8]>
        <script src="/scripts/curvycorners.src.js" type="text/javascript"></script>
        <script src="/scripts/helpforIE.js" type="text/javascript"></script>
    <![endif]-->

The helpforIE.js file looks like this:

curvyCorners.addEvent(window, 'load', initCorners);

function initCorners() {
    var settings = {
        tl: { radius: 10 },
        tr: { radius: 10 },
        bl: { radius: 10 },
        br: { radius: 10 },
        antiAlias: true
    }

    curvyCorners(settings, "div.inner");
}

And to ensure the other browsers just added a tiny line in my CSS:

div.inner { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }

Works with Internet Explorer and the others. Hurray!