Style a fieldset with rounded corners using CSS

The default display for a fieldset is a square cornered border. In certain browsers (Firefox and Safari and perhaps others) you can use CSS to make rounded corners on the border around the fieldset and around the legend.

Look at this simple form:

<form id="example" name="example" method="post" action="send.php">
<fieldset>
<legend>A Fieldset</legend>
<label for="ex1">A text field</label>
<input type="text" name="ex1" id="ex1" />
</fieldset>
</form>

Here’s how that looks in Safari, with no CSS styling.

An unstyled fieldset

I applied these rules to the fieldset selector in the CSS

fieldset {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}

Again in Safari, here’s what you see now.

CSS border rules created rounded corners in the fieldset

The property used to create rounded corners is the border property. The rule is repeated three times, a redundancy meant to create the effect in as many browsers as possible. The border-radius rule is CSS3, not yet in standard adoption by all browsers. The webkit-border-radius rule is understood by all webkit browsers such as Safari. The moz-border-radius is understood by all mozilla based browsers such as Firefox.

A border can be added to the legend as well. That element can also display the rounded borders. Here’s the CSS.

legend {
border: solid 1px black;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}

This is how it displays in Safari.

A border with rounded corners is used on the legend

A couple of changes to show how the legend’s appearance might be improved can be made in the CSS.

legend {
background: #FF9;
border: solid 1px black;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
padding: 6px;
}

Now the legend displays like this.

The legend with a background color and some padding

Additional articles at Web Teacher about styling fieldsets with CSS:

11 thoughts on “Style a fieldset with rounded corners using CSS”

  1. This is one of the things students always ask for, so keep sharing the knowledge.

    I will give one additional tip. Put experimental features first and the standard rule last. Firefox current implementation differs from the W3C spec. When they get the real thing out, you do not want to have that overridden.

    I have written about that at
    http://itpastorn.blogspot.com/2009/06/do-not-put-experimental-features-last.html
    .-= Lars Gunther´s last blog ..Högre kvalitet på webb-utbildningen på gymnasiet =-.

    Reply

  2. Thanks for the great tip, Lars. To bring what Lars is saying down to the level of the cascade, the rules should be ordered thus:
    fieldset {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    }
    which makes the W3C rule for CSS3 fall last in the cascade.

    Reply

  4. Thanks very usefull trick. It looks that broder-radius doesn’t work for fieldset, but works for legend. I already reported problem on broken fieldset border radius support.

    Reply
  6. Pingback: Cascading Style Sheets Reference Links | kabayview.com

  8. hi,
    Is it possible to change the rectangle border height and width, which appears when we use legend.It occupies full page , but i Just want it to be around my text box

    Reply

Leave a Reply