CSS3 Rounded Corners = Cool

8 December, 2009

• css
• design

Ismail Koci

Category: Web Design

I'm sure I'm not the only web designer who can't wait for CSS3 to become fully supported in all browsers. There is so much in there that will not only pave the way for awesome design, but will make things a bazillion times easier for us. For me, one of the things that stands out the most is the border radius property.

Allow yourself to float on into a dream world where you no longer have to use images or image sprites to achieve this effect. Oh what a wonderful world it would be right?

An example of how you could implement a rounded corner on say... a button, would be as follows:

div.button { -moz-border-radius: 4px; -webkit-border-radius: 4px; }

Now I'm not sure about you, but to me that is about 429 times easier than creating an image based corner set as shown to the right. Also, if you change your mind down the track and think a 3px border would be better, all you have to do is change two numbers rather than going back into you design file to make the changes, then re-export the image, then upload it to the server.

One more thing before I let you go back to work, or Xbox, or knitting, or whatever you were doing. The other really cool side to this CSS3 property is that you can handle each corner individually. That is, if you only want to round the top left corner, then you can go ahead and do that! It's as simple as this:

div.button { -moz-border-radius-topleft: 100000px; -webkit-border-top-left-radius: 100000px ; }

I wouldn't go copying and pasting that code, otherwise you might see to biggest rounded corner ever known to man! But you get the idea.

This is but one of the marvelous properties available to designers in CSS3. It's a simple one, but one that will make a universe of difference!