Png Corner is the solution of rounded/styled corners which is browser compatible

I was searching for an easy and simple implementation of smooth rounded corner that is browser compatible. If you want smooth corners you will need png images and Internet Explorer 6 has issues with png alpha transparency. Then I came with a project pngcorner . This is very easy to use and very small in size(less than 4 kb ). You can download the demo from here.

For png transparency I used unitpngfix , a very small(less than 1 kb ) and yet very effective javascript library. And used a table structure rounded corner template. For detail please visit the project page.

Here is a demo and here is the demo with jquery plugin.

Why use png corners

1. It is browser compatible(works in IE 6/7, FireFox 3, Opera 9, Chrome 1.x)
2. It's small(less than 4 kb )
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. Size of your content is totally flexible
7. You can change images from css

Why special

There are a lot of implementation on rounded corner. And there are simpler implementation.

But if you need smooth(using png images), transparent(that works even in IE6), browser compatible, small(less than 4kb), with flexible content dimension(content can have any dimension) you should use pngcorners.

Places to use

1. Use to create smooth rounded corner content with shades
2. Use to create buttons with shades(as the size is expandable you can have small buttons as well as long ones)

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

1. Add png _corner. css in page

2. Add html structure for rounded corner, which looks like this,

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

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

4. Add clear. gif in root_file/images

And you should be good to go :)

jQuery Version

There is a jQuery version of png corners. For that you will have to follow all the steps and add another javascript file pngcorners.js. But now the step 2 is now being simplified.

No need to remember all those tags and make your view complex. Just call,

$(".round_me").pngcorner();

Where you are expecting for elements with round_me class name will become rounded corner :)

So it reduces tags and cleans the view a bit.

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.

pngfix();

I am still searching for a solution with lesser limitation and complexity. So any suggestion is welcome.