Rounded Corner in CSS3

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.


border-top-left-radius: 10px;

border-top-right-radius: 10px;

border-bottom-left-radius:10px;

border-bottom-right-radius: 10px;


Declarations in Mozilla:

-moz-border-radius: 10px;   /*Produces Fully Rounded Effect*/
-moz-border-radius-topleft:10px;    /*Top Left Corner Rounded*/
-moz-border-radius-topright:10px;   /*Top Right Corner Rounded*/
-moz-border-radius-bottomleft:10px;   /*Bottom Left Corner Rounded*/
-moz-border-radius-bottomright:10px;   /*Bottom right Corner Rounded*/
Declarations in Safari:
-webkit-border-radius: 10px;  /*Produces fully rounded effect*/
-webkit-border-top-left-radius:10px;  /*Top Left Corner Rounded*/
-webkit-border-top-right-radius:10px;  /*Top Right Corner Rounded*/
-webkit-border-bottom-left-radius:10px;;  /*Bottom Left Corner Rounded*/
-webkit-border-bottom-right-radius:10px;  /*Bottom Right Corner Rounded*/

Another solution:—You can as well try the FlexiPanels CSS – a Dreamweaver extension that generated rounded corner Css boxes without coding. It’s not CSS3, but works on most browsers, including IE6.

But I personally prefer css3 code without extend my dreamweaver…

This entry was posted in Categories, CSS3. Bookmark the permalink.