Rounded corners on fieldset's and web standards


I have seen a few questions bumping around about IE9 in specific.

IE9 now supports the border-radius property but won't apply it to a fieldset.
Note that Opera 11 behaves the same.

Where as Chrome, Firefox and Safari will all happily round the corners.

So what is the general consensus on:

Rounding fieldset's is this a no go or is it something this browsers should be doing?

Problem courtesy of: Sphvn


The spec doesn't explicitly state it, but sources around seem to indicate that fieldsets are to be styled with the border-* properties to customize the, well, borders.

The HTML5 working draft suggests default styles for the fieldset element that browsers can use in their default styling implementations. You can see the border style in use here.

fieldset {
  margin-left: 2px; margin-right: 2px;
  border: groove 2px ThreeDFace;
  padding: 0.35em 0.625em 0.75em;

This would imply that there's a bug in IE and Opera which should be reported to Microsoft and Opera ASA respectively. I'm not too sure though as, again, W3C never said anything about border-radius (or border-image). You can always try filing bug reports and see what each vendor says.

UPDATE: as dstorey (an Opera employee) notes in a comment, this is a known bug in Opera.

Solution courtesy of: BoltClock


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.