Rounded corners without CSS 3 - All browser compatible

Hi,

CSS 3 provides a wide range of design tweaks which change the entire attitude of the website. Most commonly used functionality is rounded corners to any element. In CSS 3 you can create rounded corners to any element. Apart from DIV's if you want to show some images with rounded corners or button, input boxes etc then also this javascript approach can be helpful, depending on your needs. The conventional CSS 3 approach is as follows:

-moz-border-radius:  5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;

But the problem is, few browser does not support it. So one way to achieve this is by using a jQuery plugin. For this you need jquery.corner.js and jquert.min.js. Click here to download the entire source code along with the required JS files.

This is the output you will get:

Explanation:

The div is as follows:

<div id="dynamic" style="width: 200px; padding: 30px; background-color: #6af;font-family:trebuchet MS;font-size:11px">
This is the content of the DIV.
</div>

This is just a simple regular DIV with no fancy CSS 3 in it. The main trick is with the Javascript. For making the corner of the above DIV rounded in all browsers this is what you need to do:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#dynamic').corner();
})
</script>

And let jQuery do the rest. Thats it. Click here to download the entire source code along with the required JS files.