[CSS]border with rounded corners

[toploads]

Do you see this nice border with rounded corners ? :) see below



<div style="width: 260px;">
<b style="font-size:1px;display:block; overflow:hidden;">
<b style="background:#78AAFF; color: inherit; display:block; overflow:hidden;height:1px;margin:0 5px;"></b>
<b style="background:#DDDDFF; border-color: #78AAFF; color: inherit; display:block; overflow:hidden;height:1px;border-style: solid; border-width: 0 1px;margin:0 3px; border-width:0 2px;"></b>
<b style="background:#DDDDFF;border-color: #78AAFF; color: inherit; display:block; overflow:hidden;height:1px;border-style: solid; border-width: 0 1px;margin:0 2px;"></b>
<b style="background:#DDDDFF;border-color: #78AAFF; color: inherit; display:block; overflow:hidden;border-style: solid; border-width: 0 1px;height:2px; margin:0 1px;"></b>
</b>
<div style="background:#DDDDFF; border-color: #78AAFF; color: inherit; display:block; border-style: solid ; border-width: 0 1px;">
<b style="font-size:1px;display:block; overflow:hidden;height:1px;"></b>

-- YOUR CONTENT GOES HERE --

<b style="font-size:1px;display:block; overflow:hidden;height:1px;"></b>
</div>
<b style="font-size:1px;display:block; overflow:hidden;">
<b style="background:#DDDDFF;border-color: #78AAFF; color: inherit; display:block; overflow:hidden;border-style: solid; border-width: 0 1px;height:2px; margin:0 1px;"></b>
<b style="background:#DDDDFF;border-color: #78AAFF; color: inherit; display:block; overflow:hidden;height:1px;border-style: solid; border-width: 0 1px;margin:0 2px;"></b>
<b style="background:#DDDDFF;border-color: #78AAFF; color: inherit; display:block; overflow:hidden;height:1px;border-style: solid; border-width: 0 1px;margin:0 3px; border-width:0 2px;"></b>
<b style="background:#78AAFF; color: inherit; display:block; overflow:hidden;height:1px;margin:0 5px;"></b>
</b>
</div>

[jscheuer1]

This is actually very nice! However, the style should go in the head or in an external stylesheet. Also, some elements of the style are redundant. They should be streamlined.

[jscheuer1]

I did a little searching on Google and found that the above technique w/proper styling already exists:

http://www.cssplay.co.uk/boxes/snazzy.html

http://www.cssplay.co.uk/boxes/chunky.html

http://www.spiffycorners.com/