Promote Firefox With Rounded Borders

Remember the first browser war between Netscape and IE? You'd see all these little "works best in" buttons. Even back then designers were struggling to find ways to smooth out the edges of the ubiquitous square boxes that cluttered the web. Well the second browser war is in full swing but, thanks to a pretty cool little Firefox only CSS extension, you can not only get professional looking rounded borders, but you can give Firefox a marketing boost because your pages really will look best in Firefox!

Before we begin you should know that these are, of course, firefox styles only . They will not validate with the w3 css validators (although your HTML will continue to validate just fine with the W3 HTML validation service). These styles will give your borders a nice rounded corner in Firefox, but all other browsers will have your everyday, traditional, squared off border and they will simply ignore the CSS command. But when you're done, your pages will look like a Ferrari in Firefox and an Edsel in IE (but that's better than looking like an Edsel in IE AND Firefox right?).

Getting the rounded border is super easy. Just add "-moz-border-radius: 5px" to any style or stylesheet element. The larger the number the larger the curve, 0px would be no curve, while 20 would have a very large and pronounced curve. The border doesn't have to be visible for this to work, if there's no visible border Firefox will simply shape the background color/image.

Below are some examples with the folowing styles.

width:70%
border: 2px solid black; 
background-color: #B79571;  /* yea, yea, I'm a programmer not an artist durnit */ 
-moz-border-radius: 0px;

"-moz-border-radius" will shape all 4 corners but if you only want a few borders to be round (say for a tabbing effect) there are 4 other commands which allow you to style the corner of your choice...

-moz-border-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;

A few things to note: Background images aren't clipped, if your broder is visible then only solid styles are supported (no dashed or dotted), and rounded borders won't be applied to table elements when border-collapse is set to collapse.

"border-radius" is a proposed stylesheet property in the CSS 3.0 draft, "-moz-border-radius" can be considered an early preview of great things to come when CSS 3.0 is adopted by the major browsers.

So there you have it, with very little effort you can get a professional rounded border effect and your pages really WILL look better in Firefox! So go crazy and when you're done don't forget the firefox logo!

This is actually just the surface of the custom Firefox extensions to CSS. Firefox's developer pages have a full page of Firefox specific extensions you can use to bling your site out to no end. A rounded border is a fun and harmless browser specific extension, going deeper than this, however, could make your pages break other browsers or lock you into a browser that, while extreemly cool now, may not be so cool in a year or two (something IE developers know all too well).