PDA

View Full Version : Rounded Fieldsets?



cancer10
08-16-2008, 05:29 PM
Hey,

Just wondering how do u create such rounded corner fieldsets?


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



Thanx

jscheuer1
08-16-2008, 07:23 PM
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
08-16-2008, 08:11 PM
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 (http://developer.mozilla.org/en/docs/CSS:-moz-border-radius)
Webkit: -webkit-border-radius

More information here (http://www.css3.info/preview/rounded-border/').

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

You can also view this discussion (http://css-discuss.incutio.com/?page=RoundedCorners) for all the different css-based ways to get rounded corners.

jscheuer1
08-17-2008, 09:45 AM
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 (http://developer.mozilla.org/en/docs/CSS:-moz-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
08-19-2008, 09:03 AM
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
08-19-2008, 03:00 PM
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
08-20-2008, 02:45 AM
I came across an article today entitled An Experiment in Rounded Corners (http://snook.ca/archives/html_and_css/rounded_corners_experiment_ie/) on Jonathan Snook's blog. It's of some relevance here. Perhaps, some would like to read it.