Good Corner Example
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.
Enjoy!
Maybe it’s just me, but I can’t see any difference between the “full” and the “compressed” versions of the script.
Thanks for the tip. I wasn’t paying attention when I uploaded those. You can see the uncompressed one now as the first link.
Ryan, it doesn’t seem to be working on IE7?
It only works in browsers that support CSS3 properties which is currently Firefox 3.5, Safari 4, Chrome 2.
“It only works in browsers that support CSS3 properties which is currently Firefox 3.5, Safari 4, Chrome 2.”
Why would you bother with it then? This offers no advantage over just putting the radius properties into a class in a css file.
I originally used it to simply my css files which had a bunch of non-validating declarations. But I completely agree, there is no advantage at all. A better version might be to scan the DOM, and any elements with
border-radiuswould simply get its browser specific prependage or name conversion.its working on opera as well …
Do you mean it’s not working? I tested on Opera 9.6 and it didn’t work. I might work on Opera 10 but I’m not sure.
It works for me on 9.64 just fine.
What style prefix does Opera use? I looked into Opera and border-radius but I didn’t find much, they were probably outdated actually.
[...] GoodCorners – Rounded Corners with Mootools | Ryan Rampersad (tags: css3 mootools javascript round) [...]
it would be fantastic to use id’s for the elements and someting like that:
$(‘id ul li a’)
but of course it’s possible with a litte indirection the set classes to the elements!
You can actually do it by using an id the selector:
GoodCorners.round("#myElement ul li a");.