corner image   corner image


Rounded Corner Tables

This tutorial uses:
Jasc Paint Shop Pro.
Simple Filter - Quartercorner (This is a bonus filter that is included when you download the set of 10 simple filters(free)
Simple Filters

Make sure you know the RGB codes of the background of your page, and what color your inner table is. Here is a color chart to pick some.
Some people use various programs to choose colours (colour-picker etc.), but once you know the hex code - the set of 6 numbers or letters - just open psp's color bar, enter it and make a note of the numbers under RGB. Mine were R51,G51 and B153.(background) and R51 G102 B153 (inner table)

color picking

This tutorial will make corners with a radius like the one shown on this page, For a smaller table, simply start with a smaller size.

Open a new image 40w x40h ,transparent.Flood fill with white.

Click on effects/ simple/quarter corner.
Write in your numbers starting with the background colour and then the inside table's colour. Click ok

simple filter

Go to Edit>Copy (or right click on the top bar of the image and select copy from the popup menu).
Paste as new image. Image>Flip.
Paste as new image. Mirror.
Paste as new image.Flip and Mirror.
Now there are four - one per corner,

4 corners

Use the gif optimizer to save the corners with as small a file size as possible (my colors were picked as web-safe colors, if you picked different ones, it may look better with the optree tab or the median cut, just play with that screen to find what looks good.(I may have reduced the # of colors too much here & that affects the smoothness of the curve). Also, you can choose whether to have a transparent background or not. Save each with a recognisable name:

  • corner_TR.gif (top right)
  • corner_TL.gif
  • corner_BR.gif
  • corner_BL.gif

Note. Its best to start a new folder such as "img" to hold these files for the next step.

example of my settings
Example of my settings, find the best for yours.

Make a 1X1 transparent gif:
open new image, 1 px x 1 px, transparent - save as "spacer.gif"in the same folder as you corners.
Or right click and "save target as..." this spacer.gif.

Congratulations, Now we're ready to put this into an HTML document.

Go to next page

corner image   corner image