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

221 views

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>

Tags: CSS, css3, IE, miscellaneos tricks, mozilla firefox, opera, safari

« Lenovo made “Escape” and “Delete” keys twice as long as earlier.	Implement border radius in IE…hack IE for curved/rounded corner border »
Posted on Monday, September 28th, 2009 at 2:59 pm under CSS, miscellaneous tricks \| RSS 2.0 Feed

Post Comment

You must be logged in to post a comment.