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 example

Border-Radius This 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-Radius

W3Schools 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 as
border-radius: 2px 4px 6px 8px;
stating the horizontal radii, top-left, top-right, bottom-right and bottom-left radii respectively. Also
border-radius: 2px 4px 6px 8px/8px 6px 4px 2px;
states horizontal and vertical radii in the same manner.

Cross Browser Attributes

-moz-border-radius: 5px; /*For Mozilla*/
-webkit-border-radius: 5px; /*For Opera and Safari*/


Some examples you could try on,


#example1 {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

#example2 {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}

#example3 {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}


Enjoy playing around with CSS :)
Any issues do get back to me