Rounded Fieldsets?

[cancer10]

Hey,

Just wondering how do u create such rounded corner fieldsets?


http://img201.imageshack.us/img201/461/roundedpu1.jpg



Thanx

[jscheuer1]

You don't, at least not with HTML alone (the forum you've posted in). Except that some browsers will simply render them that way. It's some IE versions, possibly some other browsers. Other than that, you would have to resort to either javascript, or involved css style, or possibly a combination of style and javascript. However, I've never seen that done with fieldset. But that's not too important because you could make the effect using other elements or adapt it to fieldset.

[Medyman]

As John noted, IE does this by default. In Firefox and Webkit browsers, you can use their respective rounded corner CSS properties (in place of the CSS3 border-radius property):

Firefox: -mos-border-radius
Webkit: -webkit-border-radius

More information here.

That leaves Opera, which does not yet support any of these.

You can also view this discussion for all the different css-based ways to get rounded corners.

[jscheuer1]

As John noted, IE does this by default. In Firefox and Webkit browsers, you can use their respective rounded corner CSS properties (in place of the CSS3 border-radius property):

Firefox: -mos-border-radius
Webkit: -webkit-border-radius

I just tested this and it appears that -mos-border-radius works just fine for fieldset:

fieldset {
width:34em;
font:95% sans-serif;
-moz-border-radius: 10px;
}

However, -webkit-border-radius does not. It must be applied to elements with border, but even with a border it still doesn't work for fieldset. It does work fine for division, probably some other block level elements.

[NirupamaV]

Hi

As you said for firefox the moz radius is working. But for me in IE6 and IE7 , the rounded corners are not coming. Any solutions?

Regards
Nirupamavinoth

[Medyman]

However, -webkit-border-radius does not. It must be applied to elements with border, but even with a border it still doesn't work for fieldset. It does work fine for division, probably some other block level elements.

Ahh, good catch. Didn't actually test it when I recommend it. Thanks for the info, John.

But for me in IE6 and IE7 , the rounded corners are not coming

There really isn't a CSS solution for IE. If your Windows is set to "classic" style, you won't get the rounded corners. Otherwise, it's the default appearance.

[Medyman]

I came across an article today entitled An Experiment in Rounded Corners on Jonathan Snook's blog. It's of some relevance here. Perhaps, some would like to read it.