Hi
The big advantage of this script is that lets render rounded borders in
Safari, Chrome and Mozilla (which support rounded borders via *
-webkit-border-radius* and *-moz-border-radius*) natively with CSS3 property
and in IE and Opera with JavaScript.
The only thing you have to do is to include *curvycorners.js* into the
<head> tag of your page:
<script type="text/javascript" src="curvycorners.js"></script>
Then you have to write a CSS class like this:
.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;
}
At this point add the following code into the <head> of your page, after the
previous CSS code:
<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 are: top-left, top-right, bottom-left, bottom-right borders.
If you have different CSS classes (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>
Thanks You
Prasadsambari
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
