How to Create Rounded Corners in CSS

W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozilla/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items. Now I will show you how to do it.

NOTE:

IE still doesn’t support CSS3. Compatible CSS3 browsers are, Safari, Chrome and FireFox 3+.

UPDATE: IE 10 and Edge now support selective CSS3 new propoerty.

Here is the sample below

The quick brown fox jumps over the lazy dog.

The code for this example above is actually quite simple:

/* CSS Code */

background-color: #F2FFE1;

/* Mozilla */
-moz-border-radius: 5px;

/* Safari and Chrome */
-webkit-border-radius: 5px;

border: 1px solid #83D13D;
padding: 10px;

You can also change the style by changing the rounded left upper corner, rounded right upper corner, rounded left lower corner, rounded right lower corner.

These are handled by / should be handled by:

-moz-border-radius-topleft | -webkit-border-top-left-radius
-moz-border-radius-topright | -webkit-border-top-right-radius
-moz-border-radius-bottomleft |-webkit-border-bottom-left-radius
-moz-border-radius-bottomright |-webkit-border-bottom-right-radius

That’s it, try it to your self. have fun.