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

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.

Answer 2

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/

Answer 3

There is no WHY as such, it is no secret that the browsers behave differently.

Have you explored the -moz-border-radius attribute?

I think something like

fieldset {   
  -moz-border-radius:5px;  
  border-radius: 5px;  
  -webkit-border-radius: 5px; //edit :D
}  

works in FireFox/Mozilla, but it has been a long time since I tried :D

Answer 4

The borders in IE are only round when 1) You have the 'Use visual styles on windows on buttons' enabled under the Performance | Visual Effects tab. To put it blunt: if you have 'XP theming' enabled it will be rounded, when you have the classic Win2000 look, it will not be rounded.

The second requirement 2) is 'no border-related CSS' for the fieldset. Whenever you assign a border-color, or border-style, or border-width, the 'roundness' is gone, there is no workaround for that. The same goes for input (both buttons and fields), textbox and select-tags. Whenever IE finds no CSS theming for the control to render it will apply the 'default Windows theme' to the control.

Answer 5

You could use CSS 3 border-radius property, which will work on Firefox and Safari:

fieldset {
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}

Answer 6

http://www.webteacher.ws/2010/02/27/style-a-fieldset-with-rounded-corners-using-css/

Answer 7

fieldset {   
  -moz-border-radius:5px;  
  border-radius: 5px;  
  -webkit-border-radius: 5px; //edit :D
}