How to get rounded corners in a table

flann · Newbie Joined: Jul 13, 2005 Posts: 35

This trick took me awhile to get right, first you need to create the rounded pictures. I make a square picture with a transparent background. I draw a circle that stretches to each of the four center points. I color in the corners, to match the background color, and then eventually making the original circle transparent, or erased. Cut the picture into four boxes, now you have your corner images.

Next thing you will want to do is make a table or two depending on how you want to make it. I always set the border to 1 so I can see what i'm working with. Below is the code, including css that I use to make this possible:

Add your own graphics, and use it as you see fit. If you want to see what it looks like, http://cummuta.freemortgagecalculator.net/

<html><head>
<style type='text/css'>
body {
background-color:#ccdddd;
}
table.main {
width:750px;
background-color:#ffffff;
}
table.banner {
width:750px;
border-bottom-style:solid;
border-bottom-color:#0C56AB;
}
.heading {
font-weight: bold
}
p.body {
margin-left:6px;
margin-right6px;
}
</style>
</head>
<body>
<table class='main' align='center' cellpadding='0' cellspacing='0'>
<tr><td align='right' colspan='5'><img src='topRight.jpg' border='0' /></td></tr>
<tr><td>
<table class='banner' cellpadding='0' cellspacing='0'><tr valign='top'><td align='left'>
<img src='YourLogo.jpg' border='0' /></td>
</tr></table>
<tr><td>

</td></tr>

<tr><td>



</td></tr>

<tr><td align='left'><img src='bottomLeft.jpg' border='0' /></td>
<td align='right'><img src='bottomRight.jpg' border='0' /></td>
</tr>

</td></tr></table>
</body>
</html>