Rounded Corners

Rounded corners, are just so beautiful. When you wanted to use them, you could or generate them with JavaScript, or make some pictures in photoshop and then putting them in the background.

This is very labour intensive, especially when you have a lot rounded corners, in multiple divs. Css3 again, can make the life of web designers so much more relaxing! Because rounded corners, will become a standard soon. And of course a few browsers implemented this yet! You just have to use the browser specific prefix. (More about this when you follow the link).

Implement it now!

In the css, just add this to the code (id or class):
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;

The first border-radios, will not be used by any browser. Mozilla Firefox, Safari, Google Chrome will show the rounded corners, other browsers will still be squared.

Examples

Twitter uses border-radius already. This means everyone who uses an updated firefox, safari or google chrome, will have nice rounded corners, and if you use opera or internet explorer, it will be squared. The pictures to show the difference:

twitter in firefox
twitter in internet explorer

If you would like to have an easy example, I made one! You can find it on this file site, where all the annex-files will come. In special, here is the file for a rounded corner example.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.