Following is the script that I used in one of my recent projects. I had to create an rounded corner box with css (no images) & it had to be compatible in Firefox, IE 7, Safari & Chrome. I tried using different java-scripts & css coded available on “The net”.
Finally, I succeeded with it (combining the best code lines from all of them) & amazingly, without using any javascript 
.
Here is the code:
XHTML Required:
<div class=”box”>
<b class=”rtop”><b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b></b>
CONTENTS GOES HERE
<b class=”rbottom”><b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b></b>
</div>
CSS Required:
.rtop, .rbottom{display:block; background:#fff}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background:#ccc}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
and you are done..
You can click here to see the demo of above example.
Rounded corners done in this style will work on the following types of elements:
- floated elements
- absolutely positioned elements
- fixed width elements
- percentage width elements
Where The Rounded Corners Don’t Work
You can’t use this exact style with a fixed height or with padding on the container element. But you can solve that problem by creating a second container element that assigns your height or padding.
This technique doesn’t work on IE 5.x for Windows.
There are also some problems(not much visible) with text-indent in Internet Explorer.
I hope, this will be a useful piece of XHTML/ CSS code; for you guys out there who had to slice the images everytime the developer asked for an dynamic box with rounded corners.
Good and helpful article.