How to Round Corners on HTML Tables

In Hypertext Markup Language (HTML), any given division or table is formatted by default with right angles: all shapes are rectangular. This allows for greater ease of layout and coding. However, occasionally there is a need for rounded corners in order to make aspects of a page stand out. This process does not require any special coding, but rather relies on the use of images within the standard rectangular layout.

Instructions

Designing Corners

1

Begin a new file in your image editing software.

2

Create a small square image. Start out with a 40 x 40 pixel image. You can change these dimensions later if you want bigger or smaller curves. Within this image, create a circle.

3

Shade the interior of the circle with the same color that will be used for your table. Shade the exterior with the same color that will be used for your background. If you wish to have a transparent background, do not shade the exterior, but make sure to save your image as a transparent .gif file.

4

Cut the image into four quadrants. Save each quadrant as an independent file. Use a file name that clearly designates the position of your corner. For example, if you have created the upper left corner, save the image as "."

HTML

5

Open the code of your web page.

6

Find the relevant table tags. Set the first column width to the pixel width of your corner image. For example, if your corner is a 20 x 20 pixel image, enter the following attribute:

7

Enter an
tag in the corresponding first cell in the first column. The corner image makes up the content of that cell. Make the attributes of the image match the desired dimensions, and set the border equal to 0. For example:




8

Enter similar
tags for each of the other corner cells. The corresponding rows and columns of these cells will constitute the border of your table.