Okay, so I read a few tutorials and tried to apply it to my website... http://gangsinpoverty.netne.net/ I couldn't get it to work, but it created an effect where all the tables are touching (which I would like to keep)... Can I have some help getting the top corners of the top table, and the bottom corners of the bottom corner rounded? I also need the corners to be semi-transparent, like the rest of my table... My code (I only got as far as trying to put a top right corner on) <table width="100%" border="0" cellpadding="0" cellspacing="0"> <body background="back2.bmp" bgcolor="#575A4F"> <title>Home | Gang Culture In Poverty</title> <tr> <td colspan ="3" style="background-color:#A66F00;opacity:0.8" <img src="pictures/topright.png" width="14" height="14" border="0"/> <center> <img src="pictures/head4.png"> </center> </tr> <tr valign="top"> <td style="background-color:#FFBF40; width:150px;text-align:top;opacity:0.8"> <b><h1>Menu</h1></b><br/> <img src="pictures/home2.png"></br> <img src="pictures/wiki.png"></br> Another option<br/> </td> <td style="background-color:#FFAA00;height=200px; text-align:top;opacity:0.85";> <font color="FFFFFF">Yes, these words are meant to be repeated. I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here I will put some words here </font> </td> <td style="background-color:#FFD073; width:20%;text-align:top;opacity:0.8"> <b>ABOUT</b><br/> </tr> <tr> <td colspan ="3" style="background-color:#A66F00;opacity:0.8"> <center> <b><font color=ffffff>Jonathan Mines</font></b> </center> </td> </tr> </table> </body> HTML:
You need to use CSS and you shouldn't really be using <font> tags since they're deprecated. Use stylesheets for that. table { border:1px solid [color]; border-radius:[number in px]; -moz-border-raduis:[number in px]; } Code (markup): This will apply a rounded border for the entire table only.
topcorner { -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; -moz-border-top-left-radius:10px; -moz-border-top-right-radius:10px; } bottomcorner { -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; -moz-border-bottom-left-radius:10px; -moz-border-bottom-right-radius:10px; }