带下划线的字段集图例

Question

I am working on a small interface, and currently have a simple set of radio buttons inside a fieldset with a legend. It currently looks like this:

But I want to get a border between the legend and the buttons, like so:

The code is as follows:

<fieldset>
  <legend>Size:</legend>
  <label>
    <input type="radio" name="size" value="small" checked="checked" /> Small
  </label>
  <label>
    <input type="radio" name="size" value="medium" /> Medium
  </label>
  <label>
    <input type="radio" name="size" value="big" /> Big
  </label>
</fieldset>

Any advice would be appreciated!

Answer 1

Try this:

fieldset { 
  border: none;
}
legend {
  border-bottom: 1px solid black;
  padding: 2px 0px;
  width: 100%;
}

Demo