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.

How it works?
The property can be implemented individually corner wise,


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,
CSS Border Radius

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

#example2 {
height: 65px;
-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

Leave a Reply