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 controls would be “STEP 1” of my process. So I want to put a box around these controls and call it “Step 1”

How would I go about doing this with CSS?

Example:

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/

<fieldset>
<legend>Group 1</legend>
    <input type="text" />
    <asp:Textbox runat="Server" id="txt1" />
    <!-- etc -->
</fieldset>

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

legend {
    padding: 2px;    
}