CSS Rounded Corners Without Images

To get rounded corners, Try this CSS

For Firefox :

 -moz-border-radius: 10px;

For Individual Corners :

-moz-border-radius-topleft:10px; /*Top Left Corner*/ 
-moz-border-radius-topright:10px; /*Top Right Corner*/ 
-moz-border-radius-bottomleft:10px; /*Bottom Left Corner*/ 
-moz-border-radius-bottomright:10px; /*Bottom Right Corner*/ 

For Chrome/Safari :

-webkit-border-radius: 10px;

For Individual Corner :

-webkit-border-top-left-radius:10px; /* Top Left Corner */ 
-webkit-border-top-right-radius:10px; /* Top Right Corner */
-webkit-border-bottom-left-radius:10px; /* Bottom Left Corner */
-webkit-border-bottom-right-radius:10px; /* Bottom Right Corner */

For Internet Explorer :

You have to first download .htc solution & upload it.

Download htc files from here

Then add this to your css

behavior: url(/css/border-radius.htc);
/* This is the path where you upload .htc solution */
border-radius: 10px;

Leave a Reply

Spam Protection by WP-SpamFree