<section class="fieldset">
<h1>This is not a fieldset</h1>
<p>Booyah!</p>
</section>
.fieldset {
position: relative;
border: 1px solid #ddd;
padding: 10px;
}
.fieldset h1 {
position: absolute;
top: 0;
font-size: 18px;
line-height: 1;
margin: -9px 0 0; /* half of font-size */
background: #fff;
padding: 0 3px;
}
Nice :)
The one problem with this approach is of course that the border gets hidden behind a specifically colored (here white) background of the ‘legend’.
In a real fieldset border has a real break where the legend is, letting the original background of any parent element shine through.