Rounded Fieldsets?

[cancer10]

Hey,

Just wondering how do u create such rounded corner fieldsets?


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



Thanx

[stevebakh]

CSS3 supports rounded corners (and multiple background images), but considering cross browser support isn't around for either of those functionalities, you'd have to go with one of the following:

1) Lots of additional markup, basically, a positioned element for each corner of the fieldset with a background image. If you give a parent element relative positioning and child elements absolute positioning, you can position the children wherever you want relative to the parent. So you would create 4 small elements, one in each corner, with an image.

2) Experiment with the canvas tag (there's an implementation to make it work on IE).

3) Use the sliding doors technique. This works well if the form either a fixed width or a fixed height. It has to have one of the two. This technique requires NO additional markup and allows the form to expand in size (one way, usually height by choice). You have a background image on the form and another background image on the fieldset. There's lots of information about this technique online. Here's one related article: http://www.alistapart.com/articles/slidingdoors/

4) If the form is of total fixed size, you can just use a single solid background image. This is the least recommended option as fonts render at different sizes for different browsers and platforms. If you do go with a fixed size form, make sure there's plenty of room for play in font-sizes and input element sizes.

If you're aiming at supporting only the newest and most up-to-date browsers, perhaps you can experiment with CSS3.