Create your curved border with CSS/CSS3: border radius in css

To create a stylish and extra decoration for your border used in css, generally use border-radius to make it in curved shaped.Although this method is used in css3 and not working in IE ,but for mozilla firefox ,safari and other browser.

Syntax:

-moz-border-radius: 5px

-webkit-border-radius: 5px

-opera-border-radius: 5px

-khtml-border-radius: 5px

Example:

-moz-border-radius-topleft and -webkit-border-top-left-radius

<div style=”-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px”></div>

-moz-border-radius-topright and -webkit-border-top-right-radius

<div style=”-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px”></div>

-moz-border-radius-bottomright and -webkit-border-bottom-right-radius

<div style=”-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px”></div>

-moz-border-radius-bottomleft and -webkit-border-bottom-left-radius

<div style="-moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px"></div>

Computer Education World