How to create a new custom control for my problem

I like to make a custom control for making a div with rounded corners.
But how?
The code i like to use is this:

The html code:


<div class="bl"><div class="br"><div class="tl"><div class="tr"> //The content </div></div></div></div>

Also some CSS:
/*rounded div*/
.bl {background: url(images/lo.png) 0 100% no-repeat #E9E9E9; width:590px; margin: 0 0 10px 0;}
.br {background: url(images/ro.png) 100% 100% no-repeat;}
.tl {background: url(images/lb.png) 0 0 no-repeat;}
.tr {background: url(images/rb.png) 100% 0 no-repeat; padding:10px; overflow: visible;}
.empty {font-size: 1px; height: 1px}


So i like to use it like:
<roundeddiv:div id="X" color="#E9E9E9">
  //My new content...

</round ...