Make rounded corners for web elements ? Simple tip here

do you want to make a rounded corner for web elements like other web 2.0 ? CSS coding is a little hard and sometime it can't work properly in browsers .
I found a simple solution that work for all browser .It's a javascript library named CurvyCorners .
here is result after using this script :



To make rounded content like this ,follow these steps :
1, Download CurvyCorners
2, Uploaded curvycorners.js to a web hosting and add this line above </head> tag
<script type="text/javascript" src="your host..../curvycorners.js"></script>

3, Add this CSS code above ]]></b:skin> :

.roundedCorners{

width: 220px;
padding: 10px;
background-color: #DDEEF6;
border:1px solid #DDEEF6;

/* Do rounding (native in Safari, Firefox and Chrome) */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;

}

4,Add the following code right after </head> tag

<script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
var setting = {
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 },
antiAlias: true
}
curvyCorners(setting, ".roundedCorners");
}
</script>

tl,tr,bl,br mean top-left,top-right,bottom-left and bottom-right . You can modify the value of radius for rounded corner as you want .
If you have different CSS classes for different web elements (ex. roundedCorners, roundedCorners_1, roundedCorners_2) you can apply them changing the previous code in this way:

...
curvyCorners(setting, ".roundedCorners");
curvyCorners(setting, ".roundedCorners_1");
curvyCorners(setting, ".roundedCorners_2");
...

Now if you want to apply rounded corners to a DIV element use this code:

<div class="roundedCorners"> </div>

This code use both of CSS3 and Javascript for making rounded corners . In FireFox ,Chrome and Safari ,it use CSS3 ,and in IE ,Opera ,it use Javascript .
In case of javascript is not supported by browser , this doesn't work . So make rounded corners using background images and CSS is the suggested solution .
Enjoy it !