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

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 2

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 3

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

Answer 4

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 5

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

Answer 6

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

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