Round corners using CSS only

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

Rating:
58.0
159 votes
1 2 3 4 5

Leave a Reply