Round corners using CSS only

Arvind June 30, 2010 CSS No Comments

In Mozilla applications like Firefox, the -moz-border-radius CSS property can be used to give borders rounded corners. The radius applies also to the background even if the element has no border.

-moz-border-radius is a shortcut to set the four properties

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft

Complete article is published at https://developer.mozilla.org/en/css/-moz-border-radius

For webkit browsers use:

-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius

OR all corners in one

-webkit-border-radius

Other browsers:

-border-radius

Example:

Styled using the following:

padding:5px;
background:#f89c2e;
border:0.5em solid #222;
-webkit-border-radius:12px;
-moz-border-radius:12px;
-border-radius:12px;”
 

The horizontal menu in this blog is also styled using CSS only!!

If you like this post, please consider sharing...

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Rating:
61.0
85 votes
1 2 3 4 5

Leave a Reply

About

IT Professional and enthusiast photographer. Connect with me on Google+