There’s a tag in HTML which isn’t very well known called <fieldset> which can be used to create some nice visual effects with having to use images or lines and lines of JavaScript.

Fieldset is basically used to group different elements in a form. It draws a box around content.

Here is an example.

In IE7 by default it renders a box with a thin grey border and rounded corners. In Firefox by default it renders a box with a thin grey border but normal square corners. The corners can easily be rounded for Firefox with a bit of Mozilla specific CSS:

fieldset
{
-moz-border-radius:10px;
}

The 10px can be changed to create different amound of curvature. This means you have an area on screen with rounded corners without using any images or JavaScript, just simple HTML and CSS.

There’s another HTML tag which can add a heading to the <fieldset> tag. This is the <legend> tag.

This renders by default as the legend wording sitting within the border top, breaking the border.

Here is the legend

Here is the fieldset content.

This can be a very effective way of heading a section especially with the right styling. This effect of breaking the border and positioning the heading text over it would use a few lines of CSS.

Here is the HTML code:

<fieldset>
<legend>Here is the legend</legend>
Here is the fieldset content.
</fieldset>

Example

You can see an example of fieldsets in use on this Corporate Hospitality website. This adds a border and a different colour to the <legend> tag.