Solution for styled corners with png images, which is browser compatible. I used unitpngfix for alpha transparency in IE 6.

Why use png corner

1. It is browser compatible(works in IE 6/7, FireFox 3, Opera 9, Chrome 1.x)
2. It’s small(less than 4kb)
3. Easy to use(Just follow 3 easy steps)
4. Can use png transparency feature so that you can create your own styled box.
5. Same behavior across browsers
6. You can change images from css

Limitations

1. It uses table for the structure of rounded corner. So your rounded corner is not as flexible as div layout (It is a small sacrifice for IE 6 png transparency)
2. The images at left, right, top and bottom will be scaled not repeated. As Microsoft.Alpha filter do not support repeating.

Usage

Here is a simple "How To" to use png corners.

1. Add png_corner.css in page
2. Add html structure for rounded corner, which looks like this,

<table class="roundedCorner" border="0" cellpadding="0" cellspacing="0">
<tr>
 <td class="top_left"></td>
 <td class="top"></td>
 <td class="top_right"></td>
</tr>
<tr>
 <td class="left"></td>
 <td class="content">
   The content goes here :)
 </td>
 <td class="right"></td>
</tr>
<tr>
 <td class="bottom_left"></td>
 <td class="bottom"></td>
 <td class="bottom_right"></td>
</tr>
</table>

3. Add png hack css in header as shown bellow so that the script is only added for Internet Explorer 6.

<!--[if IE 6]>
  <script type="text/javascript" src="scripts/unitpngfix.js"></script>
<![endif]-->

4. Add clear.gif in root_file/images

And you should be good to go :)

Caution

When you load you content from ajax call or create your content dynamically after your page is loaded then you have to call the following javascript after you have done loading your content.

if(pngfix) pngfix();

You should be up and running. You can download source code. It comes with a simple example.