html - How to make a cross browser, W3C valid, semantic, non-javascript ROUND corner?

Question

I want to make a cross-browser (FF3, IE6, Safari, Opera), W3C valid (HTML and CSS both), stretchable (horizontally vertically), without JavaScript and with Semantic and lesser HTML markup Round CORNER. Images can be used for IE6.

I've tried and tested many techniques available on community. But everything has one of the problems mentioned above . If anyone knows what I want please share with me?

Remember I want to make it without any type of JavaScript, jquery or any type of js.

Answer 1

The two major rendering engines have supported CSS3 for quite some time, which makes rounded corners as simple as:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Of course, this doesn't have any effect on IE6 or 7 (it works in IE8) or 8 so you need to implement the nasty stacked division with images for the corners, which doesn't fit your semantic requirement.

I'm not a fan of display-hacks that involve javascript or css-hacks - so I use CSS3 and check that the squared-off version in IE7 looks acceptable. I've been doing this for a while as IE never used to support PNG transparency either - which meant you couldn't nicely overlay a rounded corner image on a patterned background. IE8 is a big improvement, so the problem does start to go away - but I understand your desire to make it work on IE6 and above.

UPDATE: Various CSS3 bits and pieces that were originally planned to be included in IE8 were actually removed from the final release. border-radius was one of the victims.