Is it possible to use CSS round-corners and still pass validation?

IIRC the situation is that IE simply doesn't support rounded corners, but some other browsers need browser-specific extensions... either FF or web-kit, I don't recall.

I'm happy to use it in some cases and let IE fall-back to square corners, but does using bro开发者_JS百科wser-extension CSS break validation... I quite like having my site validate AND work on IE6.

border-radius will validate against CSS3 and will work in IE9 and Opera 9.5+.

To support rounded corners in Gecko (Firefox) and WebKit (Safari, Chrome) you would need the vendor extensions -moz-border-radius and -webkit-border-radius for now. Eventually (sometime around when CSS3 Background and Borders reaches Recommendation stage), those browsers will also support the simple border-radius property, but for now they don't as there are still some issues to be hammered out over the exact syntax for specific elliptical and multiple corners.

The -vendor-x extension properties will never validate, which is a shame, but they are defined by CSS itself to be harmless so you can safely ignore those errors.

I think that most browsers no longer need specific extensions: simply use border-radius, and make sure you validate your CSS as CSS3 (rather than CSS 2.1, which the default for the W3C validator).

Invalid HTML/CSS is not why pages break in browsers like IE6, it's because they don't follow the standard.

IMO, validation is meaningless if you're using a CSS property for progressive enhancement. If the rest of the page is valid then adding border radius (including the vendor-specific properties) doesn't break in other browsers, they just ignore the property.