CSS: emulare fieldset

La seguente soluzione era già stata pubblicata sul mio vecchio sito diversi anni fa, ma all'epoca presentava molti difetti, come ad esempio l'uso di misure assolute. La ripropongo in versione aggiornata.

La soluzione sfrutta il posizionamento contestuale negativo:


.box {
	width: 25em;
	padding: 1em;
	border: 1px solid #ccc;
	border-radius: 4px;
	position: relative;
}

.box > h2:first-child {
	position: absolute;
	font-size: 1em;
	top: -1.4em;
	left: 1em;
	background: #fff;
	padding: 0 0.2em;
}

Torna su