Hi chez,
You do indeed need to use a table to do this, as rounded corners require the
use of images. The basics are that you need 6 images, one for each corner,
one for the top and bottom, and one for the sides. You will need a table
with 9 cells, 1 in the center for content, 4 corner cells, and 1 each for
top, bottom, and each side.
The images should be at least 20 pixels in size, to avoid issues with the
default line-height style. In the following example, I created images using
20 pixels. The "TB" (top/bottom) image is 20X20, with a horizontal line in
the center. The "Sides" (left and right sides) image is 20X20, with a
vertical line in the center. Each of the corners is 20X20, with a curve that
extends from the center of one side to the center of the adjoining side,
depending on which corner (UL, UR, LL, LR) it is for. The idea is that when
these images are put into the border cells of the table, they will fit
together seamlessly. The best way to create them is to either use some
imaging software to create a rectangle with curved corners and slice it into
9 sections (the center is unused), or to find a web page that has such
images in it (for rounded corners), and get the images from that web page.
In the example below, I used a style sheet to handle the styling of the
table and cells. The table's "border-collapse" style is set to "collapse" so
that there will be no borders between the cells. Each cell has a "padding"
style of "0 px" (0 pixels) to prevent the normal padding from being added
around the contents of the cell. This is necessary for some browsers,
despite the fact that the cells are sized to the size of the background
images. The corner cells are styled with a width and height of 20 pixels,
and the background images are set to not repeat. The top and bottom cells
use the "TB.gif" image, and the height only is set to 20 pixels. The
background images in these cells is set to "repeat-x" to allow the
background image to tile horizontally. The left and right cells use the
"Sides.gif" image, and the width only is set to 20 pixels. The background
images in these cells is set to "repeat-y" to allow the background image to
tile vertically.
The tables width is set to 500 pixels, which is arbitrary, and the left and
right margins are set to "auto," which will cause the table to be centered
in the page. This is also arbitrary, but probably what you want. The
contents of the table go in the center cell. Because the height of the table
is not set, whatever you put into that center cell will stretch the table
downward, and the tiling of the backgrounds in the sides will cause the
lines to seem to stretch to fit.
Remember to add the style sheet to the head portion of your page. The table
can go anywhere.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled 1</title>
<style type="text/css">
..UL
{
width: 20px;
height: 20px;
background-image: url('images/UL.gif');
background-repeat: no-repeat;
}
..LL
{
width: 20px;
height: 20px;
background-image: url('images/LL.gif');
background-repeat: no-repeat;
}
..borderTable
{
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
table-layout: fixed;
width: 500px;
margin-right: auto;
margin-left: auto;
}
..borderTable * td {
padding:0px;
}
..TB
{
background-image: url('images/TB.gif');
background-repeat: repeat-x;
height: 20px;
}
..UR
{
background-image: url('images/UR.gif');
background-repeat: no-repeat;
width: 20px;
height: 20px;
}
..Sides
{
background-image: url('images/Sides.gif');
background-repeat: repeat-y;
width: 20px;
}
..LR
{
background-image: url('images/LR.gif');
background-repeat: no-repeat;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<table class="borderTable">
<tr>
<td class="UL"> </td>
<td class="TB"> </td>
<td class="UR"> </td>
</tr>
<tr>
<td class="Sides"> </td>
<td>
Put any content in this cell, including layout tables, paragraphs,
what-have-you.
</td>
<td class="Sides"> </td>
</tr>
<tr>
<td class="LL"> </td>
<td class="TB"> </td>
<td class="LR"> </td>
</tr>
</table>
</body>
</html>
--
HTH,
Kevin Spencer
Microsoft MVP
DSI PrintManager, Miradyne Component Libraries:
http://www.miradyne.net