Use curvyCorners to make rounded corners

» Posted by take on Dec 21, 2009 in Blog | 0 comments

We use a JavaScript library called “curvyCorners” for our own sites.

curvycorners

This one can show beautiful rounded corners but can be a bit heavy to load each time. I’m planning to replace it with a lighter and faster one but let me describe how to use “curvyCorners”.

1. Download it form here and load it at a header area of HTML files like this:

<script type="text/javascript" src="curvycorners.js"></script>

2. Next, create blocks with these class attributes:

Round top corners

<div class="myboxtop">
Round top corners. <br />
Round top corners. <br />
Round top corners. <br />
</div>

Round bottom corners

<div class="myboxbottom">
Round bottom corners. <br />
Round bottom corners. <br />
Round bottom corners. <br />
</div>

Round all corners

<div class="myboxall">
Round all corners. <br />
Round all corners. <br />
Round all corners. <br />
</div>

Then move to the js file.

3. Configure like below:

Round 10px of top corners

settingsTop = {
 tl: { radius: 10 },
 tr: { radius: 10 },
 bl: { radius: 0 },
 br: { radius: 0 },
 antiAlias: true,
 autoPad: true,
 validTags: ["div"]
}

Round 10px of bottom corners

settingsBottom = {
 tl: { radius: 0 },
 tr: { radius: 0 },
 bl: { radius: 10 },
 br: { radius: 10 },
 antiAlias: true,
 autoPad: true,
 validTags: ["div"]
}

Round 10px of all corners

settingsAll = {
 tl: { radius: 10 },
 tr: { radius: 10 },
 bl: { radius: 10 },
 br: { radius: 10 },
 antiAlias: true,
 autoPad: true,
 validTags: ["div"]
}

[Note]
tl: top left
tr: top right
bl: bottom left
br: bottom right
antiAlias: Antialias (true or false)
autoPad: Margin (true or false)
validTags: curvyCorners applied tags (separated by commas)

4. Apply for classes

      myBoxObject = new curvyCorners(settingsTop, "myboxtop");
      myBoxObject.applyCornersToAll();

      myBoxObject = new curvyCorners(settingsBottom, "myboxbottom");
      myBoxObject.applyCornersToAll();

          myBoxObject = new curvyCorners(settingsAll, "myboxall");
      myBoxObject.applyCornersToAll();

That’s all!