CSS Border Radius

Its always good to customize the look and feel of whats normal to eye. Everyone knows how to draw a square, but giving it a new look what makes it look better and catchy.CSS3 introduces a new style that will give a new look to your ancient square looks.

Here’s an exampleBorder-RadiusThis should work fine in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera.
Now the above part is all done using simple CSS attributes with one property, Border-RadiusW3Schools gives a reference for you to try it on.

How to Implement this?
For all your common div’s or old border, just add this new property.
border-radius:5px;

How it works?
The property can be implemented individually corner wise,
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;

Now if two values are mentioned in the property like,
border-bottom-left-radius:5px 10px;

It means border-bottom-left-radius: x-axis y-axis

It can also be written asborder-radius: 2px 4px 6px 8px;
stating the horizontal radii, top-left, top-right, bottom-right and bottom-left radii respectively. Alsoborder-radius: 2px 4px 6px 8px/8px 6px 4px 2px;
states horizontal and vertical radii in the same manner.