4WebHelp - Rounded corners on your tables

Are you bored with having boxes and tables with square corners? Do you fancy spicing them up a bit? This tutorial will attempt to show you how to make a basic box with a round cornered border. Once you have mastered the basic concept the possibilities are endless. OK let's begin...

Stage 1 - Creating The Border Design

This stage should be possible to follow using most popular graphics programs, but you will need to have a basic understanding of how to use your favourite application. It is also worth pointing out that the method described is probably one of a dozen or so different ways of achieving the same result.

We are going to use a canvas of 100 x 100 pixels, it doesn't need to be any bigger as this won't be the size of the finished box. As always when creating graphics for the web the resolution should be 72 dpi.

Due to the need for pixel perfect accuracy it is best to work at fairly high magnification, but be sure to regularly check it still looks good at 100%. Firstly create a circular selection 30 pixels in diameter (fig.1). Fill the selection with the colour you have chosen for your border, here we have chosen purple. Now create a smaller circular selection centred within the bigger circle (fig.2). Its size will determine the thickness of your border, we are going to create a 3 pixel border so the selection needs to be 24 pixels in diameter. Fill the smaller selection with the colour you want the inside of the box to be (fig.3).

Now we can separate the circles into quarters to use as the corners for our border. Start by selecting the right hand half of the circles (fig.4), in this case 15 pixels. You can then move this half over to the right hand side of the canvas. Then do the same for the bottom halves, select the lower 15 pixels (fig.5) and move to the bottom of the canvas (fig.6)

Finally for this stage we need to create the sides. Firstly use the paint bucket tool to fill the white space in the centre with your border colour (fig.7). Then use a couple of rectangular selections (fig.8) to fill in the centre colour, remembering to leave the 3 pixels top, bottom, left and right. You should be left with something that resembles fig.9.

Stage 2 - Slicing the Graphics

To allow the box to vary in size we need to break the graphic we created in stage 1 into its component parts.

Let's start with the corners. Remember the size of the first circle we used to create the corners was 30 pixels in diameter. This means the radius of our corner is 15 pixels, which in turn means the smallest our corner graphic can be is 15 x 15 pixels any less and the joins where the corners meet the sides won't be smooth, any more is a waste.

Make a 15 x 15 pixel selection in the top left corner (fig.10), copy and paste it into a new document of the same size. Save the document as a GIF file, optimising as you see appropriate. It's good to use a consistent naming convention to help you identify each graphic later on, we will use "box_tl.gif" where "tl" stands for top left. Do the same for the remaining three corners (fig.11), we will call them "box_tr.gif" "box_bl.gif" and "box_br.gif".

Now for the four sides. We will use the same process as we did for the corners. We only need to create graphics of 15 x 15 pixels as we are going to tile the edge graphics so that the box can expand depending on the size of the contents - more on that later.

Make a 15 x 15 pixel selection along the top edge (fig.12) copy and paste it into a new document of the same size. Again save the document as a GIF file, optimising as you see appropriate. We'll call this one "box_t.gif" where "t" stands for top. Do the same for the remaining three sides (fig.13), we will call them "box_r.gif", "box_l.gif" and "box_b.gif".

We will also need an invisible, transparent 'spacer' graphic that will help us accurately control the size of table cells later on. To create a spacer graphic you need a 1 x 1 pixel canvas, the colour of which doesn't matter. This should then be saved as a GIF with the colour of the single pixel designated as a transparent colour.

Stage 3 - Creating the HTML

With the 9 graphics we created in the last stage we will now put together the HTML that you can use in your web pages. The border will be based on a 9 cell table, 3 columns wide, 3 rows deep (fig.14). You can set the width of the table to whatever you like. The cellspacing, cellpadding and border attributes should be set to 0. The HTML will look something like this:

Now we have our basic table structure we can start adding our border graphics. We are going to do this by adding some CSS to the style="" attribute in the <td> tags. For more information about CSS (Cascading Style Sheets) you may like to read Tara's tutorial (CSS Basics).

We are going to add the graphics as background images, this is especially important for the four sides as we want them to tile the full height and width of each side irrelevant to how wide we have set the table or how much content it contains. We could add the corners using a regular <img> tag but doing each of the eight graphics as background images will give more consistent results, especially when printing the page. The CSS we use is as follows: background: url(images/box_tl.gif) ensuring the path to the image, contained between the brackets, is correct. Now go ahead and add the CSS for each of the graphics (fig.15).

If you were view what we have created so far in a web browser you would get something resembling fig.16. Not quite the look we are after.

So how are we going to solve this? The first step will be to add some width="" and height="" attributes to the table cells. However this alone is not enough, so we will also make use of the spacer graphic we created earlier. By nesting the spacer graphic in each of the outer cells and setting its size to that of the border graphics it will afford us the control we need.

Let's take a quick look at what we have done. Each corner graphic is 15 x 15 pixels, so we have set the <td> dimensions and the spacer graphics to this size also.

The width of the top and bottom edge cells have been set to 100% as we want these to expand according to the width of the table. Only the height of the spacer graphic for these cells is important and should be 15, the same as the top and bottom tile graphics. We have set the width of these spacers to 1 but you could set them higher to stop the box closing below a certain size if your table width is a percentage.

The spacer graphics in the left and right edge cells are 15 wide and 1 high. Again we could set the height value higher to give the box a minimum height.

We're almost there now, we just need to pay some attention to the centre cell (fig.17). Quite simply we need to set the colour for this to match the colour we used in our graphic. This time we will use background: #cc6666" in the style="" attribute, replacing the hex value depending on the colour you chose. And most importantly we can add the contents of our box, whatever it may be.

<table width="200" cellspacing="0" cellpadding="0" border="0">
<tr>
  <td width="15" height="15" style="background: url(images/box_tl.gif)"><img src="images/spacer.gif" width="15" height="15" alt="" /></td>
  <td width="100%" height="15" style="background: url(images/box_t.gif)"><img src="images/spacer.gif" width="1" height="15" alt="" /></td>
  <td width="15" height="15" style="background: url(images/box_tr.gif)"><img src="images/spacer.gif" width="15" height="15" alt="" /></td>
</tr>
<tr>
  <td width="15" style="background: url(images/box_l.gif)"><img src="images/spacer.gif" width="15" height="1" alt="" /></td>
  <td width="100%" style="background:#cc6666">The contents of your box goes here!</td>
  <td width="15" style="background:url(images/box_r.gif)"><img src="images/spacer.gif" width="15" height="1" alt="" /></td>
</tr>
<tr>
  <td width="15" height="15" style="background: url(images/box_bl.gif)"><img src="images/spacer.gif" width="15" height="15" alt="" /></td>
  <td width="100%" height="15" style="background: url(images/box_b.gif)"><img src="images/spacer.gif" width="1" height="15" alt="" /></td>
  <td width="15" height="15" style="background: url(images/box_br.gif)"><img src="images/spacer.gif" width="15" height="15" alt="" /></td>
</tr>
</table>

And Finally...

That's it! You should now have a box with rounded corners that looks a little something like this:

You can of course adapt this basic concept to suit your own needs, for example, you might like to try adding a drop shadow to the box or you could experiment with different shaped corners.

Latest comments on this tutorial
Sanni
Excellent tutorial. It really solve my problem.
David Simmer
Sure, go for if you need to style a table of TABULAR DATA. Otherwise, don't jam your code full of table cruft just to accomplish this look on a paragraph of text. Check out something like http://www.456bereastreet.com/archive/200406/css_teaser_box/ for a super-simple fixed-width method, and just bite the bullet and learn how to use CSS for more complicated scenarios. Using tables solely to accomplish visual tricks will come back to haunt you when you want to change styling, and makes your document structure inflexible and semantically misleading.
Mervin Hughes
This is brilliant, i been wanting an easy way to create rounded corners for a long time! http://www.freeanonymousproxy.net/cgi-bin/cgiproxy/nph-proxy.pl/000110A/http/www.seo.com
Ferenc Nagy
I have simplified the solution. Visit http://hw.cs.southern.edu/nagy/Szidi/My%20rounded%20corners.doc
Ferenc Nagy
A would-be-customer lady accused me that my tables are old-fashioned. She liked rounded corners. I have got it from you! Thanxxxxxxxxxxxxxxx hw.cs.southern.edu/nagy
kumar
This is really a good stuff. I like the way you did it and also ensured the w3c standards .. good work
Andrew
I must say being a vetran of web design for over 10 years and doing some very well known sites this is a great tutorial. I don't usually comment on peoples tutorials and methods but you have executed a good job. Well done.
Ashley
I've been looking for a code just like this for a long time. Very well written and very easy to understand. Thanks!
nick
ilan posted Quote: Well done, The point is to preduce corners effect wit the minimum code. the table grid 3X3 is simple but makes it have on page load. On my way to find lighter code, i found this code: http://kalsey.com/2003/07/rounded_corners_in_css/ let me tell you that doing this in CSS is the worst idea anyone ever had, ever. There is even MORE code, less compatibility, no advantage, it's WAY overly complicated and it's less versatile. The method described here with tables is the best way. Don't fix something if it aint broken!!!
Carl Dent
Hey if your graphicall challenged (like me), there is a cool little program called ezround that is the cats meow for this stuff. www.ezround.com Even does drop shadows and it writes the code for you! Carl
ilan
Well done, The point is to preduce corners effect wit the minimum code. the table grid 3X3 is simple but makes it have on page load. On my way to find lighter code, i found this code: http://kalsey.com/2003/07/rounded_corners_in_css/
Cri-Cri
Hmmzzz :-/ It seems to be a problem placing my tr, r, and br-images. www.bigyes.org Anyone?
:emaN
The images for the top & bottom borders only need to be 1x15 px; the images for the left & right borders only need to be 15x1 px: they'll still do the same job
Daniel, 4WebHelp Team Member
Rusty: Feel free to submit code which would behave the same yet be shorter .
rusty
i think you could solve that with just one table and css:) too much code for that!
Daniel, 4WebHelp Team Member
Quote: Would it applicable to pre-load the images used to speed things up a little? Thanks again. I don't know what you mean. The image will be loaded when the page loads anyway.
Great code. Thanks - suggestion:
Would it applicable to pre-load the images used to speed things up a little? Thanks again.
Ciaran Lalor
Very helpfull thanks!!
rayz3n
thats kinds awesome i wanneed to do the tales with the border for a long tme
zonix
Thanx for the tutorial, straight up good pictures and at last but not least SourceCode. great
Sandie
Just what I was looking for. Thanks for the corners tutorial.
Mwafrica
Im new at this webmaster thing and 4webhelps'.
Venkat
Thanks a lot for the excellent tutorial. Helped me a lot.
diN
great stuff, awesome site!
G'dog
I Like your site!!

Add a new comment

4WebHelp: Rounded corners on your tables

Stage 1 - Creating The Border Design

Stage 2 - Slicing the Graphics

Stage 3 - Creating the HTML

And Finally...