IE9 Fieldset Rounded Corners

Rounded corners on fieldset's and web standards

The spec doesn't explicitly state it, but sources around w3.org 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.

Rounded corners on a fieldset

Some items (buttons, input boxes) are using the system visual styles by default - and in the default Windows XP/Vista themes, fieldsets have rounded corners. (Take a look at Display Properties, for example.)

If you assign any style to an <input />, for example, it will lose its hover effects, gradients and other things too.

Support for border-radius in IE

Yes! When IE9 is released in Jan 2011.

Let's say you want an even 15px on all four sides:

.myclass {
 border-style: solid;
 border-width: 2px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}

IE9 will use the default border-radius, so just make sure you include that in all your styles calling a border radius. Then your site will be ready for IE9.

-moz-border-radius is for Firefox, -webkit-border-radius is for Safari and Chrome.

Furthermore: don't forget to declare your IE coding is ie9:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Some lazy developers have <meta http-equiv="X-UA-Compatible" content="IE=7" />. If that tag exists, border-radius will never work in IE.

Does Opera 10.6 properly support border-radius on fieldsets?

That's probably a bug in their rendering engine.

---

Related Topics