Recently I had to program a site with images with round corners. It´s a possibility to just upload the images with rounded corners, but for this site it was not really an option, because the images were banners, headers etc. And, they are resources uploaded to the repository and scaled with php when smaller versions of the resource are needed (This repository is one of the key features the CMS of the company I work at).
So, back to the rounded corners. Scaled images with different sizes at 100 percent have simply don't look the same anymore. Another solution had to be found, and JavaScript was an option.
Since we´re using JQuery a lot on our sites these days (for form validation, image lightboxes, menus) I first checked out if there were JQuery plugins capable of doing the work for me. And without a lot of effort I found some solutions, with one standing out from the others: http:// jquery.malsup.com/corner
This plugin was originally written by Dave Methvin and adds rounded corners to any layer. And the best is that it is compatible with Internet Explorer.
Many patterns are available and all are configurable. For an easy round corner you just need to use $('#layername').corner();. The options are:
$('#layername').corner(); Normal corner
...("bevel"); Bevel
...("notch"); Notch
...("bite"); Bite
...("cool"); Cool
...("sharp"); Sharp
...("slide"); Slide
...("jut"); Jut
...("curl"); Curl
...("tear"); Tear
...("fray"); Fray
...("wicked"); Wicked
...("sculpt"); Sculpt
...("long"); Long
...("dog"); Dog Ear
...("dog2"); Dog1
...("dog3"); Dog3
...("dogfold"); Dogfold
...("bevelfold"); Bevelfold
...("steep"); Steep
...("invsteep "); Invteep
Furthermore, you can choose your corner, Specify Size, Mix and Match, change colours or add borders. It´s simply amazing the possibilities this plugin offers.
Only one note though. In Explorer the script breaks on certain elements. For example the IMG element is not supported. But with some creative use of layers you can easily work around this. I´ll explain it with an example.
Round corners on imagines: Just insert the image in a layer. Make sure the layer has the size of the image (if you don´t know the size, use the width() and height() properties of JQuery and add them as an inline style) and apply the corner function to the layer that holds the image. A simple working example can be seen here: http://jquery.malsup.com/corner/image.html
I will use this script for sure more times, and I think it´s the best option to get rounded corners until CSS3 gets more widely accepted.
