GoodCorners is a tiny Mootools plugin that can apply the CSS3 border-radius to elements using a unified syntax so you can have beautiful rounded corners.

Usage
GoodCorners can be used in a couple different ways. Both parameters are optional. Omitting both will automatically round any elements with the gc class already on them. If you don’t supply a specific border radius, the default is 10px. Here is the GoodCorners syntax:

GoodCorners.round( [selector] [, radius settings]);
/*
	Radius settings:
		radius
		topleft
		topright
		bottomleft
		bottomright
*/

// Examples:
// To round images in a gallery
GoodCorners.round("#gallery img");

// To do some extreme rounding
GoodCorners.round("#extreme", {radius: "100px"});
   

Notes

In all cases, you will need to define a border on the elements you wish to style with typical stylesheets.

  /*for default use*/
.gc {
  border: 10px solid black;
}

/*assuming you have a white background, easy to change*/
#gallery img {
 border: 10px solid #000;
}
 

GoodCorners doesn’t support KHTML out of the box because Mootools doesn’t provide a build in method for detection, that I know of.
What it works in

GoodCorners works in browsers that supports the border radius property in CSS3 or least a proprietary variant of it. Browsers that support this property are: Firefox 3.5, Safari 4 and Chrome 2.

GoodCorners doesn’t do anything putting the directives into a stylesheet can’t do but GoodCorners makes it easy to apply rounded corners with javascript without worrying about those pesky style name variations. There is a full version and a compressed version. Really, the only reason you need GoodCorners is if you want to round elements from javascript.

Demo: http://ryan.ifupdown.com/2009/08/26/goodcorners-rounded-corners-with-mootools/
Source: http://ryan.ifupdown.com/2009/08/26/goodcorners-rounded-corners-with-mootools/

Related Listings:

1. Rounded Corners in Internet Explorer One of the reasons that I love Firefox and Webkit-based...
2. DHTML Rounded Corners Configuration Include files First, you need to include the js...
3. Skype-like buttons using jQuery If you use Skype I am sure that you noticed...
4. ImageCaption – a MooTools Plugin for Auto-Captioning Images ImageCaption is a MooTools 1.2+ plugin for easily adding figure...

Do you like this post?

Email: