html - Rounded corners on a fieldset

Question

I noticed that the "fieldset" tag renders a rounded corner border on IE (it renders squared on the other browsers).

<fieldset>
         <legend>My legend</legend>
</fieldset>

BUT if i set a CSS style on the fieldset, the rounded corners disappear!!

Anybody know why? How to keep the rounded corners but with another border color?

[EDIT] : sorry for the confusion, i don't ask how to have rounder corners on firefox/other browsers, i want to know how to keep the rounder corners on IE and have another border color (border-color:red; on the fieldset changes the rounds to squares...).

Answer 1

This site has a fix for the issues concerning fieldset rounded corners and IE10. There are still issues in IE (sad face). You have to float it to work 100% of the time.

fieldset {
  margin: 20px;
  padding: 0 10px 10px;
  border: 1px solid #666;
  border-radius: 8px;
  box-shadow: 0 0 10px #666;
  padding-top: 10px;
}
legend {
  padding: 2px 4px;
  background: #fff;
  /* For better legibility against the box-shadow */
}
fieldset > legend {
  float: left;
  margin-top: -20px;
}
fieldset > legend + * {
  clear: both;
}

<fieldset>
  <legend>Legend</legend>
</fieldset>