Rounded Corners with CSS3

Simply this is like the repetition of same technique used by many css coders out there. The real basic where it starts of how to apply rounded corners using css3.

Since many years back, rounded corners has been major signature of design elements in Web 2.0 trend. Many css coder have been using rounded corner images to achieve this purpose. But since the page loading time, number of images used, dns lookups, minified css, javascripts and so many things has been counted for an “excellent” web 2.0 website, using css3 codes might be the life saver.

Using simple -webkit-border-radius or -khtml-border-radius properties, we can get rounded corners without using any image at all.

Straight to the Point

For example, code below will return 5 pixel border radius corner to all.

[sourcecode language=’css’]

-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;

[/sourcecode]

While this one will give only top corners rounded.

[sourcecode language=’css’]

-moz-border-radius: 5px 5px 0px 0px;
-khtml-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;

[/sourcecode]

It will look like image below:

Bad News

The bad news is that not all browsers can support this feature. You can try view demo below in different browsers to see it live or follow this useful site that states a complete table on the browsers compatibility. Read more why it is so.

Use the downloaded file below for testing. Open it using you favorite css editor and keep different combination. Of course it is very simple. But, why not strengthen it? Have fun!

See it or Have it