CSS rounded corners for all browsers

Every now and then something new comes along that makes you wonder how you ever survived without it.

The ability to create rounded corners using CSS is just such a thing. There are clever javascript tricks for repositioning a circle image in the background, or there's the old school method of creating an image for each corner, but, thank god, both methods can soon be relegated to the back of the css cupboard thanks to the introduction of the border-radius property.

The, still to be finalised, CSS3 method is as follows:
To round the lot: border-radius
To be specific:
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

As this method isn't finalised yet, Firefox, Safari and Chrome are making use of their own methods for the time being

Mozilla:
To round the lot: -moz-border-radius
To be specific:
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
-moz-border-radius-topleft

Safari / Chrome:
To round the lot: -webkit-border-radius
To be specific:
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius
-webkit-border-top-left-radius

So if you want to set a border-radius of 10 pixels to a div with the class 'rounded':

div.rounded {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

Nb: border-radius: won't have any effect for now, but we put it in there in anticipation of the glorious day when it will work across all browsers!

But what about the excellent Opera browser, and the many Internet Explorer browsers (complete with all their charming eccentricities that web developers love!) I hear you cry?

Well, nothing in CSS is THAT easy and so there is an inevitable hack.

First download this .htc solution: Curved Corner and add it to your site.

For example SITEURL/js/border-radius.htc

Then update the css as follows:

div.rounded {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
behavior: url(css/border-radius.htc);
border-radius: 10px;
}


For further tips take a look at Jon Raasch's excellent post on CSS rounded corners (particularly the note on the path to the htc file and the section entitled "Hoops you have to jump through for IE:").

Bear in mind that there are a lot of limitations with IE, so you may decide to ignore the hack and leave the site with square corners for browsers that don't support the property as well as putting the champagne on ice (for now).

Edit: 31 March 2010: Opera 10.5 has now been released, including full border-radius support!

Red Deer Now Developing For iPhone

That’s right! i wont give away too much information but stay tuned! Red Deer creative is currently in the process of developing a group of iPhone apps that will be handy in day to day life.

Breast Cancer Awareness Ad

The client, Allergan, came to LehmanMillet and said they needed an ad for Breast Cancer Awareness week, completed in 2 days (yes - concepted, shot and laid out in 2 days). The creative team, Pencilbox Studios' Joseph Banuelos and Lindsay Coluccio concepted the ad in one day. The sketch was client approved and a photographer was called to do the shot. Originally, the model was to be dressed in a pink leotard but that was abandoned in favor of a nude shot. The model was placed in at the exact position of the Breast Cancer pink ribbon, the shot was taken (and slightly manipulated). The ad was composed and sent out on time!

Postscript: The ad won a Print Magazine Award.