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>

http://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/