As learnt on the home page, CSS3 is nothing but the latest CSS standard. Furthermore, it has complete backward compatibility with all the earlier versions of the CSS.

CSS3 is split into different modules. Apart from consisting the old CSS specifications (split into small pieces), CSS3 has several new modules. Few of the most important modules among them are as follows:
- Text effects
- Rounded corners
- Box model
- Animations
- User interface
- Selectors
- 3-D and 2-D transformations
- Backgrounds and Borders
- Multiple column layout
- Replaced content
- Image values

Majority of these properties available in the new CSS3 are readily implemented in the modern browsers.

In this short article we’ll introduce you to one of the new features available in the CSS3 - rounded corners.

CSS3 rounded corners
Making use of the border-radius property of the CSS3, you can create rounded corners in any element. This property is supported by all the major browsers including the Mozilla Firefox, Opera, Internet Explorer, Safari, Google Chrome and more, as well as their latest versions.

More on CSS3 border-radius property

As mentioned above, you can make use of this property to add rounding corners to any element. Following are a few examples of such renderings:
- You can create rounded corners in an element having a specific background color.
- You can create rounded corners in an element having a border.
- You can even create rounded corners in an element that has a background image.

The importance of specifying each corner

By supplying just one value to the border-radius property, a radius of that corresponding value gets applied to all the four corners of the element. However, you’re allowed to specify every corner separately if you need. Following are some rules regarding all such specifications:
One value - As mentioned above, in this case all the four corners get an equal rounding effect.
Two values - The first value gets applied to the bottom right and the top left corners, while the second one gets applied to the bottom left and top right corners.
Three values - The first value gets applied to the top left corner, the second one gets applied to the bottom left and top right corners, while the third one gets applied to the bottom right corner.
Four values - The first value gets applied to the top left corner, the second one to the top right corner, third one to the bottom right corner and the fourth value gets applied to the bottom left corner.