How-to #5:
Create rounded boxes for text and graphics

The sort of thing I mean by 'rounded boxes' is the box, often with a 'rounded' top and sometimes bottom edge, often used as a sidebar or to contain some important point or graphic. Something like this:

These are not difficult to produce once you know how it's done. There is probably more than one way to do this, but I prefer to use background images in a table since then the box can be as short or tall as required. The only caveat is that the width must be fixed.

Steps to take

In this case, we'll create a 150-pixel wide box. To start with, we need a table with 1 column and 3 rows. Set the table width to 150 pixels with cell spacing, padding, and border width all zero. Now we need the background images. The top cell will take the rounded corners and you can add the box title later. The bottom cell shows the box sides and bottom line, and the middle cell (which takes all the content of the box) has a background image which just shows the left and right sides.

First, create the rounded rectangle for the box top. If you're using Fireworks, the easiest way is to draw a rounded rectangle then cut it in half horizontally to give a shape with rounded top left and right corners and square bottom corners. The steps to follow are:

open a new document in Fireworks
set the page's background colour to whatever colour your web page will use
create two vertical guides on the page exactly 150 pixels apart, and two horizontal guides exactly 50 pixels apart (when we cut it in half, the graphic will then be 25 pixels high - for thinner boxes, just alter the size of the rectangle)
draw a rounded rectangle (100% rounded) in the centre of the four guides; it should measure 150 by 50 pixels in the Info panel
set the stroke to none and the fill to whatever colour you like
add a third horizontal guide exactly halfway between the other two (remember that you can double-click a guide to set its position to the exact pixel)
select the rectangle, then using the knife tool cut it in half horizontally along the guide you just added; the resulting graphic should be 150 by 25 pixels and should look like this:

Export this graphic and keep it.

Next, create the side borders. To do this:

draw a non-rounded rectangle between the two vertical guides; its width must be 150 pixels but the height is irrelevant as long as it exceeds 10 pixels or so for ease of use
set its fill to none, and stroke to 1-pixel hard with the stroke colour the same as the colour used for filling the rounded top
using the export area tool, select an area 150 pixels wide which includes both vertical edges of the rectangle, and is 2-4 pixels high (it doesn't really matter)
the result should look like this (this is 4 pixels high and will be repeated vertically in the table to give left and right sides):

Finally, create the bottom which uses the same box you just drew:

using the export area tool, select an area which just includes the bottom line of the box plus its sides
the height of the area can be whatever you like - make it taller to give a larger bottom margin to the box
a 10-pixel-high, 150-pixel-wide graphic looks like this:

In your web page, change the height of the top cell to 25 pixels so that it has the same height as the top graphic. Make the rounded half-rectangle the background image for this cell. Set the background image of the middle cell to be the thin graphic with sides only, and finally the bottom cell has the last image as its background. Set the height of the bottom cell to the same height as the graphic. Do not set the height of the middle cell! This gives you:

If you look at this in a browser, there's probably something wrong. In particular, the bottom cell is wrong - there is more than one horizontal line! If this happens, it is probably because your web creation software has inserted non-breaking spaces into each cell to stop the table collapsing during design time (Dreamweaver certainly does this). The space has a height greater than the 10 pixel-high background image, so the image repeats vertically.

You'll need to go into the HTML code and remove those spaces. Then, you'll find that because each cell is empty, Netscape 4 won't display the cell properly. Insert a title into the top cell, and some content into the middle cell. For the bottom cell, you'll need to insert something that won't show but will stop the cell collapsing. A 1x1 pixel transparent .GIF file will do fine. Having done this you get:

This is a title

Here is some content for the box. Note that the box height expands to whatever you need.

You can put anything in here, as required.

Which is fine and should display in all browsers. The only problem is that the text is hard up against the sides. You can fix this either by inserting a slightly smaller table into the middle cell (width 140 pixels, say, and centred in the cell) or use a CSS style to provide a margin. I used the latter method to get this:

This is a title

Here is some content for the box. Note that the box height expands to whatever you need.

You can put anything in here, as required.

The style has 10 pixel blue text with 5 pixel left and right margins.

So there you are - rounded boxes for standout sections. The simple Fireworks .PNG file and the three graphics can be downloaded in this .zip archive. You'll need to edit the .PNG if you want to change colours because the background is set to be the same as this page.

Download graphics files for rounded box (28K)

Page last updated: March 14th 2004

How-to #5: Create rounded boxes for text and graphics

Steps to take

How-to #5:
Create rounded boxes for text and graphics