CSSを使用してWebフォーム上の特定のコントロールを囲むグループボックスを作成する

質問

私のWebフォームには、3つのドロップダウンリストのコントロールがあります。

これらのコントロールの周りにグラフィカルなボックスを作成したいと思います。この理由は、これらのコントロールを選択することが、私のプロセスのステップ 1 になるからです。したがって、これらのコントロールの周囲にボックスを置き、それを「ステップ 1」と呼びたいと思います。

CSSでこれを行うには、どうしたらよいでしょうか。

例です。

どのように解決するのですか？

A fieldset を持つ legend は、フォームコントロールのための視覚的かつ意味的なグループ化を提供します。そして、これをCSSで好きなようにスタイル付けすることができます。A fieldset はやや独特で、その legend の境界を視覚的に遮ることができる点です。 fieldset (の境界を視覚的に遮ることができます（他の要素では可能ですが、困難です）。

例 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;    
}