how-to #5: create round 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:

Rounded box

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:


Export this graphic and keep it.

Next, create the side borders. To do this:


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


In your web page, create a three-row, one-column table and 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 padding. 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 5 pixel left and right padding.

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 Download graphics files for rounded box (28K)