HOW TO CREATE ROUNDED CORNERS IN CSS

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;"> W3C has offered some new options for borders in <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Css3 blog by websiteat100.com">CSS3</a>, 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.</div> <h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;"> NOTE:</h3> <div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;"> IE still doesn’t support <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Css3 blog by websiteat100.com">CSS3</a>. Compatible <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Css3 blog by websiteat100.com">CSS3</a> browsers are, Safari, Chrome and FireFox 3+.</div> <div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;"> Here is the sample below</div> <div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;"> The quick brown fox jumps over the lazy dog.</div> <div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;"> The code for this example above is actually quite simple:</div> <div data-settings=" minimize scroll-mouseover" id="crayon-52a957095942a047406824" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;"> <div data-settings=" show"> CSS</div> <div> </div> <div> <table style="border-collapse: collapse; border-spacing: 0px;"><tbody> <tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a957095942a047406824-1"> 1</div> <div data-line="crayon-52a957095942a047406824-2"> 2</div> <div data-line="crayon-52a957095942a047406824-3"> 3</div> <div data-line="crayon-52a957095942a047406824-4"> 4</div> <div data-line="crayon-52a957095942a047406824-5"> 5</div> <div data-line="crayon-52a957095942a047406824-6"> 6</div> <div data-line="crayon-52a957095942a047406824-7"> 7</div> </td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a957095942a047406824-1"> /*this is the CSS code*/</div> <div id="crayon-52a957095942a047406824-2"> </div> <div id="crayon-52a957095942a047406824-3"> background-color: #F2FFE1;</div> <div id="crayon-52a957095942a047406824-4"> -moz-border-radius: 5px;</div> <div id="crayon-52a957095942a047406824-5"> -webkit-border-radius: 5px;</div> <div id="crayon-52a957095942a047406824-6"> border: 1px solid #83D13D;</div> <div id="crayon-52a957095942a047406824-7"> padding: 10px;</div> </td></tr> </tbody></table> </div> </div> <div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;"> 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.</div> <div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;"> These are handled by / should be handled by:</div> <div data-settings=" minimize scroll-mouseover" id="crayon-52a9570959434723320123" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;"> <div data-settings=" show"> CSS</div> <div> </div> <div> <table style="border-collapse: collapse; border-spacing: 0px;"><tbody> <tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a9570959434723320123-1"> 1</div> <div data-line="crayon-52a9570959434723320123-2"> 2</div> <div data-line="crayon-52a9570959434723320123-3"> 3</div> <div data-line="crayon-52a9570959434723320123-4"> 4</div> </td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a9570959434723320123-1"> -moz-border-radius-topleft | -webkit-border-top-left-radius</div> <div id="crayon-52a9570959434723320123-2"> -moz-border-radius-topright | -webkit-border-top-right-radius</div> <div id="crayon-52a9570959434723320123-3"> -moz-border-radius-bottomleft |-webkit-border-bottom-left-radius</div> <div id="crayon-52a9570959434723320123-4"> -moz-border-radius-bottomright |-webkit-border-bottom-right-radius</div> </td></tr> </tbody></table> </div> </div> <div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;"> That’s it, try it to your self. have fun.</div> </div>

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

Read more »