Предотвращение прохождения границы элемента fieldset через элемент легенды

У меня есть набор полей, как я могу разместить легенду внутри поля с границей? Я хочу, чтобы граница обходила легенду, а не через середину.

JSFiddle

fieldset {
  border: 0;
  padding: 0!important;
  margin: 0;
  min-width: 0;
  border: 1px solid red;
}
legend {
  padding: 0!important;
}
<fieldset>
  <legend>Title</legend>
</fieldset>

Ответы

Ответ 1

Один из вариантов - поместить элемент legend влево:

fieldset {
  border: 2px solid #f00;
}
legend {
  float: left;
  width: 100%;
  padding: 0;
  font-weight: bold;
}
<fieldset>
  <legend>This is a legend</legend>
  <label>Here is an input element: <input type="text" /></label>
</fieldset>

Ответ 2

Вариант принятого ответа (используя SASS), который должен работать во всех современных браузерах (IE9 +)

fieldset {
  > legend {
    float: left;

    + * {
      clear: both;
    }
  }
}

Это очистит следующий элемент после float, поэтому вам не придется беспокоиться о том, что ваш макет перепутался.