Curved Box No.9054

Does the world need another HTML curved box – Nope. Is there already thousands of curved boxes on the internet – There certainly is. Should anyone else bother publishing yet another curved box – Probably not. So with that in mind – here’s a curved box I wrote a while back. It doesn't have borders but you can put the heading in a different colour if you want.

The only advantages to this box is

1. It works


2. I actually understand how it works unlike all the other curved boxes I found which seemed utterly mysterious

Images for the corners are available here (top right, bottom right, top left, bottom left)

CSS

.roundBox
{
            float:left;
            width:270px;
            background-color:#fedd52;
            margin:0;
            padding:0px;

}

.roundBox .heading
{
            width: 240px;
            float: left;
            text-align:center;
            margin: 10px 0 0 0;
            font-weight:bold;
            font-size: 16px;
}


.roundBox .LT
{
            float:left;
            height:15px;
            width: 15px;
            background: url(../images/curveLT.jpg) no-repeat left top;


}

.roundBox .LB
{
            float:left;
            height:15px;
            width: 15px;
            background: url(../images/curveLB.jpg) no-repeat left bottom;


}

.roundBox .RT
{
            float:right;
            height:15px;
            width: 15px;
            background: url(../images/curveRT.jpg) no-repeat right top;
}

.roundBox .RB
{
            float:right; 
            height:15px;
            width: 15px;
            background: url(../images/curveRB.jpg) no-repeat right bottom;
}

.roundBox .contentOuter
{
            clear:both;
            width: 100%;
}

.roundBox .contentInner
{
            padding:10px;
}

HTML

<div class="roundBox">
<div class="LT"></div>
<div class="heading">Box Heading</div>
<div class="RT"></div>
<div class="contentOuter">
<div class="contentInner">
Content, Content, Content, Content
</div>
</div>
<div class="LB"></div>
<div class="RB"></div>
</div> 

This curved box has already been released into the wild. If some one was to release another one, there is a good chance that this rarest of all HTML constructs might well breed in its natural environment. We can but hope.