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:

Style Fieldsets like a Pro

Just a few CSS rules can make your fieldset look like it was styled by a pro. A fieldset is used to organize forms into sections that can be identified with labels called legends. We’re going to start this discussion looking at a fieldset with no legend. We’ll get to legends in a bit.

Here’s a fieldset with no styling as displayed in the Firefox browser.

unstyled fieldset in Firefox

The default Firefox fieldset is a gray border around the enclosed form fields. I’ll start with the border. This rule will change the make it solid, 2 pixels in width, and a dark blue.

fieldset {
border: 2px solid #00F;
}

This changes the appearance:fieldset with a blue 2px border

Any border width, style or color could be used. Next, I’ll round the corners. Use the border-radius property for that.

fieldset {
border: 2px solid #00F;
border-radius: 8px;
}

In Firefox, you now see this.

the fieldset with rounded corners

I want to change the alignment in the form. That has nothing to do with the fieldset, but it will look better if the fields align. This is the rule added.

label {
padding: 3px;
display: block;
}

The new appearance.

the form with some style added to the labels

Many rules can be applied to the label element. Color, font, and other aspects of the label appearance can be styled.

There are still many things that can be styled about the fieldset. Width, background-color, background-image and others. Here’s the fieldset with a gradient background image added to the fieldset rule.

fieldset {
border: 2px solid #00F;
border-radius: 8px;
background: url(fieldsetbg.jpg) no-repeat left top;
}

The effect is this.

the fieldset with a background image

What about legends?

Web Teacher reviewed Fancy Form Design a few days ago. One of the things I learned in that fine little book is that screen readers such as JAWS announce the fieldset legend anew for each new field in the fieldset. The example in Fancy Form Design uses a fieldset with the legend “Change Password” and fields labeled “Current Password” and “New Password.” The authors pointed out that hearing the screen reader say “Change Password” before each of the form labels can be quite a lot of listening to the word “password.” As the authors also pointed out, not every screen reader even announces the legend at all.

Before I explain the solution from Fancy Form Design, here’s how the fieldset would look with an unstyled legend added.

the fieldset with a legend

So you’ll see what some of the possibilities are with styling a legend, I’ll show you a legend with the following rule applied.

legend {
font-weight: bold;
font-size: 1.5em;
color: #03F;
border: 1px solid #03F;
padding: 5px;
}

Here’s how it looks.

the fieldset legend with CSS styles added

Much more can be done to the legend with CSS. For example, the corners could be rounded, the background could be styled, the font could be changed, and so on.

For this example form, I don’t think it would be too much for a screen reader to announce, “Your contact information, full name” followed by “Your contact information, email,” and “Your contact information, telephone.” I might decide to use the legend here.

In Fancy Form Design, the authors suggest using a heading before the fieldset, rather than using a legend in the fieldset. With a heading rather than a legend, the screen reader would read the heading just once. Visually, it still makes sense. Here it is with an unstyled h3 element.

the fieldset with a heading

My advice is to decide whether or not a legend makes sense on a case-by-case basis.

Conclusion

You can style a fieldset like a pro when you realize that everything you know about CSS can be applied to the elements, classes and ids that exist as hooks for CSS rules within the HTML used to construct the form. Everything you know about styling fonts, colors, backgrounds, borders, padding, margin, width, display, and other CSS properties can be applied to styling fieldsets.

See also:

Tip: Styling a fieldset with CSS

A small form with a styled fieldset to give you some ideas about how to punch up the appearance of a form. More . . .

A form element that will help you organize and clarify a form is the fieldset element. A form can contain more than one fieldset. For example, there might be a fieldset containing the form elements for the user’s personal information: name, email, etc. Another fieldset might collect information about a question, a product, or a service. Depending on the purpose of the form, fieldsets can help break it up into meaningful chunks and visually distinct areas.

click image to see the HTML page

Click the image to see the actual HTML page. (The form is nonfunctioning, submit won’t get you anywhere.)

The form in the example contains one fieldset. It’s simple, but it’s enough to illustrate the point.

Here’s the code for the fieldset:

<fieldset>
<legend>Reserve Your Space</legend>
<p>
<label>Your Full Name
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>Email
<input type="text" name="email" id="email" />
</label>
</p>
<p>
<label>Phone
<input type="text" name="phone" id="phone" />
</label>
</p>
<p><input type="submit" name="button" id="button" value="Submit" />
</p>
</fieldset>

Look at the various elements in the form. These elements can be styled: fieldset, legend, p, label, input. (The p elements aren’t necessary, the example could use br or div instead. And, in most forms, the submit button would not be part of a fieldset, particularly if the form had more than one fieldset, which is a very likely scenario.)

Any rule of CSS can be applied to any or all of the form elements present. You can write rules for fonts, colors, background, background-image, line spacing, padding, margin, border, or anything else you might want to present in a particular way.

These are the CSS rules I wrote. You could do this many other ways.

fieldset {
border: 1px solid #CCA383;
width: 50%;
background: #FFE8EF;
padding: 3px;

}
fieldset legend {
background: #CCA383;
padding: 6px;
font-weight: bold;
}

Some simple touches with CSS involving color, padding, and border make the legend stand out and visually emphasize the form on the page.

See also: Styling the Label Element with CSS, which contains the same fieldset with additional styling for the label elements. Also see Three examples of fieldsets styled with CSS, which gives some very different fieldset examples.