WordPress Themes and CSS Rounded Corners

The efficient method of producing rounded corners on a block element is to use CSS.

All 4 corners:
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;

Applying to, respectively, Gecko browsers (Firefox) – Konqueror – Webkit browsers (Safari, Chrome).

Or just the one corner:

-webkit-border-top-left-radius: 3px;
-khtml-border-radius-topleft:10px;
-moz-border-radius-topleft:10px;

(Note the difference in syntax, just to keep you on your toes)

And there’s also the CSS3 specification:
border-radius: 5px;
border-top-left-radius: 5px;

So, as a theme designer, you immediately come up against the question – if it doesn’t work with Internet Explorer, do I put it in my theme? (Or go with the fun and games of making up a few round background graphics…)

As of today, I would say yes, go with CSS rounded corners in a WordPress theme – even though IE users aren’t getting the full experience. The principle here is progressive enhancement – standards-compliant and fully-featured browser users gain the benefit, and the impetus is applied to, yes, MS to get with the program.

It’s not as if the rounded corners don’t degrade gracefully back to the foresquare and conservative straightness loved by MS, is it…