Site Search

2008-10-14

How to get rounded corners in CSS 3 without images

Below the magic CSS3 property that saves a lot of effort to get rounded HTML element corners:

-moz-border-radius: 0 1em 0 1em;
-webkit-border-radius: 9px;
border-radius: 0 1em 0 1em;
/* the second notation is for browsers that already support this CSS3 property */


The "border-radius" CSS property can be applied on any (X)HTML element, including fieldsets and labels. Hereby "-moz-" is the Mozilla/Firefox specific prefix for its experimental support of some CSS 3 properties. "-webkit-" is the corresponding WebKit engine based browser (Chrome, Safari, and Konqueror) prefix. See W3C's CSS 3 Border Module Working Draft 7 for more information!