Web Views using AJAX part 3 (curvy corners)

I wanted to make my headers more exciting with curvy corners. Now this has always been a pain in the arse, getting all graphics-y with pictures for the corners. I don't want my corners to be that precise and I need to be able to "skin" them to different foreground and background colours without having to Adobe the *****ing pictures every time.

So I have come up with a JS applied style solution that will with a call to a function put curvy corners onto an IDed HTML element. The first past result looks like this.

I use any BLOCK type element to create this effect... in my case an
make it 1px high with a fontsize of 0.01em and a step down/up ammount of left and right border in the background colour.

to achieve this effect call the function SJ_curveCorner with the following parameters..

1. The Target Element ID
2. The foreground colour you need
3. The background colour you need
4. The Style you want ... A = all corners , T= Top corners only , B = Bottom corners only

The functions are quite small infact here they are .. feel free to use them in your own code

function SJ_curveCorner(oTarget,fColor,bColor,style)
{
var oElement = document.getElementById(oTarget);

innerHTML = oElement.innerHTML;
if (style=='A' || style=="T")
{
oElement.innerHTML =""
oElement.appendChild(SJ_buildLine(bColor,fColor,5));
oElement.appendChild(SJ_buildLine(bColor,fColor,3));
oElement.appendChild(SJ_buildLine(bColor,fColor,1));
oElement.appendChild(SJ_buildLine(bColor,fColor,1));
oElement.innerHTML = oElement.innerHTML+innerHTML;
}
if (style=="A" || style=="B")
{
oElement.appendChild(SJ_buildLine(bColor,fColor,1));
oElement.appendChild(SJ_buildLine(bColor,fColor,1));
oElement.appendChild(SJ_buildLine(bColor,fColor,3));
oElement.appendChild(SJ_buildLine(bColor,fColor,5));
}

}

and

function SJ_buildLine(fColor,bColor,nLen)
{
var aLine1= document.createElement("h")
aLine1.style.display='block';
aLine1.style.height = "1px";
aLine1.style.fontSize= "0.001em";
aLine1.style.borderLeft =nLen+"px solid "+fColor;
aLine1.style.borderRight=nLen+"px solid "+fColor;
aLine1.style.backgroundColor = bColor;
return aLine1;
}