Search code examples
cssstandards-compliance

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 browser-extension CSS break validation... I quite like having my site validate AND work on IE6.


Solution

  • 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.