How to Create a Border with Curved Edges Using HTML
You can put round borders on your webpage using simple HTML tables and images. This allows you to create a border with rounded edges around any size table, anywhere on your site. All you need is a simple graphics program like Paint, Publisher or Adobe Design, and you can make your website look more professional in no time.
Other People Are Reading
Instructions
-
-
1
Open your graphics program (in this case we will use Paint). Select the rectangle with rounded corners icon and then select the color of your table or content area. Draw a rectangle with round borders. Next, fill it with the same color. Cut out the corners using the "Select" tool. Save each one using a different name: r-brd-top.jpg, l-brd-top.jpg, r-brd-bot.jpg, and l-brd-bot.jpg.
-
2
Create a table that will hold your content, with cellpadding and cellspacing set to "0" and back ground color set the same as your images. Place your top right border image (cut from the rectangle) in the first column. Set the size for even corners: <table cellspacing="0" cellpadding="0" bgcolor="color-of-your-round-borders"><tr><td width=15 height=15><img src="l-brd-top.jpg">. Then add another <td> tag and set the width for the inside area of the table in this tag: <td width=150>. Your content will go under this column in the next row.
-
-
3
Add the right side border in the next column: <td width=15 height=15><img src="r-brd-top.jpg"> and set the width and height of the column to control the shape of the borders. Make sure your image is large enough to fill this shape. The browser will cut off the bottom right hand part of the image if it is too large.
-
4
Add the next row and then create an empty <td> column with a width of 15 pixels: <td width=15>. Add another column using the <td> tag: <td> Your content goes here....</td>. Then ad another column (under the right side image), with a <td width=15 height=15> tag. End this row and then finish your table by using the bottom corner images in the same way.
-
5
Add the bottom corners in the table in the <td> tags just as you did for the top. Make the final row, and insert the left bottom corner in the first column: <td width=15 height=15><img src="l-brd-bot.jpg">. Then add another column with the width you set in the second column up top. <td width=150>.
-
6
Add the final corner to the table in the next column: <td width=15 height=15><img src="r-brd=bot.jpg">.
-
1
Tips & Warnings
Creating round borders like this is a very simple way to round the corners of any border. You can also do this with CSS, which is a little more complicated. You can also use background images to create line borders on white backgrounds. Do this with images in the same way. Set as backgrounds in the columns. Just use straight lines, and rounded corners.
Always set your cell padding and cell spacing to "0", and be sure you can match the colors of your corners to the background color of your table. You can cut a square piece from the rectangle you cut the corners from. Use this as a repeating background in the table in order to match colors perfectly.
