[thelist] fieldset borders and legend styling

John DeStefano john.destefano at gmail.com
Tue Dec 19 14:54:02 CST 2006

I just spent a few frustrating moments hashing through some CSS form
styling issues, and though the nuances and work-arounds may be common
knowledge to many, they weren't to me.  Maybe this will help someone
else or save them from ripping out a few of their own precious


<tip author="John DeStefano" type="CSS" title="Styling form fieldsets
and legends">
<fieldset/> and <legend/> tags help add accessibility and organization
to forms, but styling them can be frustrating.  Browsers tend to
display a legend as part of a fieldset, so if a fieldset has a border
(as most do), that border may appear to strike through the legend
text.  In fact, it may do this inconsistently: I had one form with
four fieldsets, and this strike-through effect appeared in only two of
the four, even though they were all tagged in exactly the same manner.

You can avoid this by including a legend{} style to your CSS that adds
padding to the left and right sides of tits content.  In addition, you
may opt to clearly mark the legend in its own box within the confines
of the fieldset with "border" and "background" properties, like the
legend {
        border:#BBBDD6 solid 1px;
        padding:1px 10px;

This places the legend text within a box that gets centered
horizontally along the fieldset border.

Speaking of the fieldset border: you may notice an inconsistency in
the presentation of the border line, in which it appears in some areas
and not in others.  Again, of four fieldsets I had within one
particular form, three appeared correctly on all four sides, and one
appeared without a bottom border.  I found that setting the border
size to too small of a value (such as something below "0.1em") caused
this inconsistent behavior.   Setting the border width value to "1px"
results in a border line that is quite thin and is usually a safe bet.


More information about the thelist mailing list