Tuesday, November 25, 2008

Html Fieldset Rounded Corners - Updated (1/18/2010)

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;
   -webkit-border-radius: 7px;
   border-radius: 3px;
}
This works for IE, Firefox, and now Chrome. It still doesn't look "nice" in Safari.

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

4 comments:

macem said...

But not working in Safari 3.2.1 and Opera9.6-10 :(

Anonymous said...

So simple.

I wish it would work in safari....

Anonymous said...

Excellent tip. Thanks.

Nankz said...

i dont know, please give tutorial step by step. thanks