Create a group box around certain controls on a web form using CSS

Question

I have three controls on my web form of three drop down lists.

I want to create a graphical \"box\" around these controls. The reason for this is that selecting these co

Answer 1

A fieldset with a legend provides a visual and semantic grouping for form controls. You can then style this as desired with CSS. A fieldset is somewhat unique in that the legend is capable of visually interrupting the border of its parent fieldset (possible with other elements, but difficult).

Example: http://jsfiddle.net/NUMcr/1/

Group 1
    
    
    

fieldset {
    margin: 8px;
    border: 1px solid silver;
    padding: 8px;    
    border-radius: 4px;
}

legend {
    padding: 2px;    
}