<public:attach event="oncontentready" onevent="SDCRadius()" />
<script type="text/javascript">
function SDCRadius() {
    //SDCRadius. Simon Champion, 2009-09-04. v1.0
    //MSIE hack to try to support rounded borders using the border-radius CSS styles.
    //Uses graphical corner pieces to create the rounding.
    //Usage: Within the CSS code, where you have defined any border-radius styles, also add a line as follows: behavior:url(sdc-radius.htc);   (adjusting the url path as necessary)
    //Supports:
    //   * Radius units given in Pixels or Ems
    //   * Allows separate rounding for each corner or side of the element.
    //Caveats:
    //   * Border line is incomplete, so only for borderless rounding, where the edge is defined by a change in background colour/image.
    //   * The corner graphics used have a white outer edge. You are free to replace them if you need to place your rounded borders onto other colour backgrounds, but background images will be more problematic.
    //If these caveats mean it's no good for you, then also try Remiz Rahnas' border-radius-ie8.htc (http://www.htmlremix.com), but not that this also has a number of caveats.

    var cnrimg={tl:'/images/iecnr_tl.gif',tr:'/images/iecnr_tr.gif',bl:'/images/iecnr_bl.gif',br:'/images/iecnr_br.gif'};
    var corners=new Array(); corners.tl=['top','left']; corners.tr=['top','right']; corners.bl=['bottom','left']; corners.br=['bottom','right'];
    var stycnrs=new Array(); stycnrs.tl=['Top','Left']; stycnrs.tr=['Top','Right']; stycnrs.bl=['Bottom','Left']; stycnrs.br=['Bottom','Right'];

    this.main=function() {
        var rad=this.CalcSizes(); var bdr=this.CalcBorders();
        if(rad.tl||rad.tr||rad.bl||rad.br) {
            this.style.position='relative';
            this.innerHTML=this.GenCorners(rad)+this.GenCornerBorders(bdr,rad)+this.innerHTML;
        }
    }

    this.CalcSize=function(radius) {
        if(!radius) {return 0;}
        if(radius.match(/px/)) {return parseInt(radius.replace(/px/,''));}
        if(radius.match(/em/)) {return parseInt(parseFloat(radius.replace(/em/,''))*parseInt(this.currentStyle['fontSize']));} //calculate radius ems * fontsize = pixels. (currentStyle is IE-specific, but that's okay because we're only doing this whole thing for IE anyway)
        return 0;
    }
    this.CalcSizes=function() {
        var rad={tl:0,tr:0,bl:0,br:0};
        for(var cnr in corners) {
            rad[cnr]=this.CalcSize(this.currentStyle['border-'+corners[cnr][0]+'-'+corners[cnr][1]+'-radius'] ||
                            this.currentStyle['border-'+corners[cnr][0]+'-radius'] ||
                            this.currentStyle['border-'+corners[cnr][0]+'-radius'] ||
                            this.currentStyle['border-radius'] ||
                            0);
        }
        return rad;
    }
    this.CalcBorders=function() {
        var bdr={tl:{},tr:{},bl:{},br:{}};
        for(var cnr in stycnrs) {
            bdr[cnr].width=this.CalcSize(this.currentStyle['border'+stycnrs[cnr][0]+'Width'] ||
                            this.currentStyle['border'+stycnrs[cnr][1]+'Width'] ||
                            this.currentStyle['borderWidth'] ||
                            0);
            bdr[cnr].colour=(this.currentStyle['border'+stycnrs[cnr][0]+'Color'] ||
                            this.currentStyle['border'+stycnrs[cnr][1]+'Color'] ||
                            this.currentStyle['borderColor'] ||
                            0);
        }
        return bdr;
    }
    this.GenCorners=function(rad) {
        var output='';
        for(var cnr in corners) {
            if(rad[cnr]) {output+="<img style='position:absolute; "+corners[cnr][0]+":0px; "+corners[cnr][1]+":0px; width:"+rad[cnr]+"px; height:"+rad[cnr]+"px;' src='"+cnrimg[cnr]+"' />";}
        }
        return output;
    }
    this.GenCornerBorders=function(bdr,rad) {
        //not the greatest border calculator in the world, but it'll do.
        var output='';
        for(var cnr in corners) {
            if(rad[cnr] && bdr[cnr].width) {
                brad=rad[cnr]+1;
                for(var pos=0; pos<brad; pos++) {
                    var posy=parseInt(Math.abs(Math.sin(pos))*brad); var posx=parseInt(Math.abs(Math.cos(pos))*brad);
                    var nexty=parseInt(Math.abs(Math.sin(pos))*brad); var nextx=parseInt(Math.abs(Math.cos(pos))*brad);
                    var bdwidth=(nextx-posx+((pos<=brad/2)?2:1))*bdr[cnr].width; var bdheight=(nexty-posy+((pos>=brad/2)?2:1))*bdr[cnr].width;
                    posy=(-posy+brad-bdheight)*bdr[cnr].width;
                    posx=(-posx+brad-bdwidth)*bdr[cnr].width;
                    output+="<div style='height:"+bdheight+"px; width:"+bdwidth+"px; background-color:"+bdr[cnr].colour+"; position:absolute; "+corners[cnr][0]+":"+posx+"px; "+corners[cnr][1]+":"+posy+"px;'></div>";
                }
            }
        }
        return output;
    }

    this.main();
}
</script>