Html Fieldset Rounded Corners - Internet Explorer (IE) and Firefox


I don't usually prefer anything about Internet Explorer. However, IE's default presentation for the Html fieldset tag just looks nicer. Firefox, on the otherhand, defaults to an ugly square box presentation.

So, to try to get Firefox to look more like IE (something I never thought that I would say) ...

fieldset { 
-moz-border-radius-bottomleft:7px;
-moz-border-radius-bottomright:7px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:7px;
border-radius: 3px;
}

I confess this only addresses IE and Firefox. Supposedly, Safari and Chrome will support rounded corners under their CSS3 support (eta?). I tried -webkit-border-radius: 3px;, but it never rendered correctly in the versions of Safari and Chrome that I have. I'm also assuming that Opera falls in this same category.


If you absolutely must have rounded corners: http://www.spiffycorners.com. However, I caution you against the author's approach because it requires too much Html for an effect that will be cleanly implemented in CSS3. Again, this is only a nice to have.


Example:


Title
contents



0 comments: