Rounded corners without the images (CSS style)

THIS IS A TEST, IF THIS WORKS THEN THE CODE BELOW WORKS FOR THIS BROWSER!!

It has been a problem for almost every web designer to add rounded corners on their sites. This is because of the browser wars that has been delivering their designs differently across different browsers.

The basic option to resolve this was to add an image to be able to adapt to different browsers. Unfortunately that would require more work. Another trick is to use CSS to render rounded corners. That trick is prone to errors though compared to the image technique but will require less time and less work to do. Here is how it is implemented:

Add the following to your CSS codes:

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

-moz-border-radius is being used by FireFox

-webkit-border-radius is for Chrome and Safari

-khtml-border-radius older Konquerer browsers

border-radius is the default way to render it but is actually a future-proofing for whenever browsers properly support this.

The above code will render all your corners for your borders/divs to rounded form. If you want to do it on specific corners only you can specify it by adding the specific position. Here are examples:

-khtml-border-radius-bottomright: 10px;
  -khtml-border-radius-bottomright: 10px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;

The following would render the bottom parts as rounded. Basically you just need to put the proper combination of top, bottom, left and right to make it work.

NOTE: As for IE, there is are few known tutorials, hacks or tricks out there that can probably do it. But only few are proven to work, if you are really eager to do it, image trick is always the best option.. :P