So, You Want Round Corners, Huh?

Use these to jump around or read it all…

One of the knocks against HTML is that it’s blocky. Designs are too squared off. This is especially true of tables. They are always four-sided with nice, sharp corners.

Lately though, I am seeing some great programming that basically uses those sharp cornered tables to create softened shapes. I asked a question one time in my HTML class here on campus. The question read, “It is possible to have tables with rounded corners…true or false.”

The answer is false but a lot of students missed it because they would swear they had seen tables with rounded corners. I attempted to explain that the tables were quite square. What was inside the table cells gave the illusion of the rounded corners. Yes – it was a lousy test question and has since been retired.

The process of getting rounded corners and other rounded shapes through tables is rather easy. In fact, I’ve now used the process a few times on some different Web sites. My latest use is on my University personal homepage. Take a look. Notice how the corners of the orange “card” are rounded. If you can’t quite make it out from the screen shot below, here’s a link to the actual page.

Those rounded corners were achieved through the use of tables and some small square images that give the impression that one corner has been rounded off. Let’s take a look at how it’s done.

Here’s another example I just finished and posted (7/27/01). It has nothing to do with this tutorial beyond being another example of using tables to round corners. This one is a little more dramatic with longer, sweeping
lines. It’s a page for the SLU chapter of Phi Kappa Phi.

The Table Structure

Here’s the deal. In order to achieve this effect, you’re going to have to understand tables and how they work. You will most likely have to know how to set a table cell’s height and width, and possibly how to use the COLSPAN and ROWSPAN commands. If any of that is Greek to you, see my original table and advanced table tutorials before going on. I won’t be getting into the basics of table creation here.

The table that created the “card” in the screen capture above is set up so that three “corners” are set aside. That way I can fill that corner with a small image that has it’s corner rounded off. If that didn’t make much sense, stay tuned. It’ll get easier. Here’s the same thing as above except with the table walls exposed.

Now you can most likely see why you’ll need to know the ins and outs of using height and width commands in your table cells. That table above has a height and a width set for every cell so that it retains its shape.

Once again – EVERY cell has both a height and a width. Don’t rely on only putting one width per column or one height per row. Set them all to force the computer’s hand.

The Corner Images

Here are the three corner images that were used to create the effect. I have them in a table cell with the background set to black so you can see the image’s shape a little better:

I named the images “orangeupperleft.gif”, “orangelowerleft.gif”, and “orangelowerright.gif” just so I could keep them straight as to where they went in the grand scheme.

They’re Not All Images

If you look at the table format again, you’ll notice large sections of orange. Because the little corners are images, you might think that the larger sections are also images. That’s not the case. They are just table cells that have a BGCOLOR set that equals the corner image’s color. Here’s the table screen capture again. I have placed a red “X” on the table cells that get their color through a BGCOLOR command rather than an image:

It’s basically everything other than the corner images themselves.

The thing you MUST keep in mind is that when creating the corner images, the color you use must be the exact same Hex code color as you will use in the table cell backgrounds. That way the images and the cells with color will meet up flawlessly.

And speaking of making those images…

Making The Images

Before I get into the images, let me explain that this is how I do it. I am by no means saying that this is the only method to getting the effect. This is simply how I get the rounded corner.

My preferred image-editing program is Paint Shop Pro. I have the full version. You can try out a 30-day version of the program by clicking to visit Jasc.com.

Now, onto the good stuff. These are the steps I use to create the look.

1. Before you do any image work, layout the page and build the table. Build it using height and width attributes in each of the table cells. Build it with the colors you want to use. Choose a background color for the page. Note that the background of the page above is white, thus the “rounding” effect is achieved by making part of what will be a square image, white.

I would suggest that you try to get your corner images square. It will make things a whole lot easer later on.

Are you still with me? Everything is square. You are simply giving the illusion of roundness by taking a square image and rounding a corner. If that image has the same color as the background and the same color as the remainder of the table, then the effect will perfectly blend in.

The reason I say to do all of that first is that by first building the table and choosing the colors, you will know exactly how large an image you will require and what color you will use to create the image. In addition, you’ll know what color to use to blend the corner of the image into the background.

Now that you have all that, move along.

2. Now let’s build the corner pieces. Let’s say that your corner pieces are going to be 100X100. Note again that the image is square.

In your image editor, create an image that is 100X100 filled with the same color as the background as the page. Now you know it will blend into the background.

Now choose to use your image editor’s “Shape” tool. This is the tool that will allow you to draw a shape on the 100X100 image. You should be able to choose from many different shapes. You want to choose to draw a circular shape. Make sure the Shapes tool will only draw the shape. Do not allow the tool to fill in the shape it draws.

Here’s the trick!

You want to draw your circle so that the arc meets the edges of the image at the same number of pixels along the top edge as along the side edge. If that doesn’t happen, you get a lop-sided arc. Maybe you want that look. If so, go for it. I’m just staying basic for this tutorial. Later on you can try all kinds of strange and wonderful arc formats.

To get the effect, find the exact middle of your image. This is why a perfectly square image is best to work with. The exact middle will be the half the length and half the width. So, the exact middle of our 100X100 image is the 50,50 pixel point. Most image editors will show you the pixels points as you roll your pointer over the image.

Get your pointer to that exact middle point, and click. As you start to drag your mouse, the circle will begin to draw. Keep dragging until the circle touches all four sides at the same time. When it happens, unclick. You should get something that looks like this:

3. This is the basis for all of your arcs. Notice how you now have a square image broken into five sections. This single image can now acts as any corner. In fact, it can act as both an internal or external corner. All you need to do now is use your image editor’s “Fill” function to fill in the color. The Fill function is usually denoted by a little paint can tipping a drop of paint.

Just make sure to fill in the correct parts to create the correct corner. Here’s an upper left-hand corner:

Here’s a Tip: More than likely, your corners will all be the same size. If they’re not, redo the table and get them all the same size. Once you have the square with the circle drawn, save it. Now you have a single image that will create every corner. The corners will look more uniform that way.

Simply open the circled image, fill in what you want and then choose “Save As” to save the image under a new name. Re-open the round image again and fill in for the next corner. Just keep doing that and you’ll have four uniform corners.

4. Internal corners will use the exact same format. You’ll just fill in different sections of the image and erase what’s left of the circle. Here’s an upper left internal corner:

I erase the circle’s lines by choosing the image program’s shapes tool, setting it to the background color, and also setting it to fill in the color rather than just draw the shape. I then chip away at the lines.

That’s That

Now you’ve got the images. Just plug them into the table you’ve already built and you should get nice rounded corners
inside of a square table.

Here’s one more hint. When building the table, set the border to zero and make a point of running all of the table code together. Do not leave any spaces from <TABLE> to </TABLE> and the cells will butt right up against each other.

 
Enjoy!