Edit in JSFiddle

body {
    padding: 10px;

fieldset {
    background: #ccc;
    border: 1px solid #666;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin-top: 26px;
    padding: 10px;

.ie7 fieldset {
    margin-top: 0;

/* create a new element based on the data-legend attribute and style */
fieldset:before {
    background: #ccc;
    border: solid #666;
    border-width: 1px 1px 0 1px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    content: attr(data-legend);
    float: left;
    font-weight: bold;
    margin-top: -37px;
    padding: 5px 10px;
    position: relative;

/* position the real legend off screen */
legend {
    left: -999em;
    position: absolute;

/* ie7 doesn't support :before, so just show the real legend */
.ie7 legend {
    font-weight: bold;
    padding: 5px;
    width: auto;
    position: static;

div + div {
    margin-top: 10px;

p {
    margin: 15px 0;
<!-- add the legend value to a data attribute on the fieldset -->
<fieldset data-legend="Form legend">
    <legend>Form legend</legend>
        <label for="txt1">Text box 1</label>
        <input type="text" id="txt1">
        <label for="txt2">Text box 2</label>
        <input type="text" id="txt2">
<p>Styling form legends is still quite a tricky business, with Opera being pretty bad, and the others unable to achieve certain appearances.</p>
<p>However, by adding the legend value as a data-legend attribute on its fieldset, you can style it however you like. Just absolutely position the actual legend off screen and&hellip; <b>bingo!</b></p>