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+.

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

1 2 3 4 5 6 7

/*this is the CSS code*/ background-color: #F2FFE1; -moz-border-radius: 5px; -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:

CSS

1 2 3 4

-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.