bordi arrotondati

allora ... nel mio sito volevo mettere delle liste in alcune celle arrotondate ho utilizzato questo codice che all'inizio ha funzionato:

<div style="padding: 20px; float: left; width: 70%;">
<table>
<tr>


<h1>Giochi</h1>
<br />
      <h1>Giochi Del Mese</h1>
<style type="text/css">
#box {
background: #808080;
width: 300px;
height: 300px;
padding: 30px;
border-radius: 20px;
}
</style>
<td>
<div id="box">
<p align="left">clicca per giocare</p>

      <a href="javascript:doIt()" onmouseover="dispIt();return true"><img src="nome_immagine.gif" name="sponsor" alt="banner a rotazione" border="0" /></a> 
</div></td>

<style type="text/css">
#box1 {
background: #808080;
width: 300px;
height: 300px;
padding: 30px;
border-radius: 20px;
}
</style>
<td>
<div id="box1">
      <p>pubblicit&agrave</p><br>

<script type="text/javascript">
/* <![CDATA[ */
document.write('<s'+'cript type="text/javascript" src="http://ad.altervista.org/js.ad/size=300X250/r='+new Date().getTime()+'"><\/s'+'cript>');
/* ]]> */
</script>
     

     </div></td>

    </tr>

    <tr>

    
<style type="text/css">
#box2 {
background: #808080;
width: 300px;
height: 300px;
padding: 30px;
border-radius: 20px;
}
</style>
<td>
<div id="2">
<h1>Multigiocatore</h1>
  <ol>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

      </ol>
</div>
</td>
      
<style type="text/css">
#box3 {
background: #808080;
width: 300px;
height: 300px;
padding: 30px;
border-radius: 20px;
}
</style>
<td>
<div id="3">
 <h1>Nuovi Giochi</h1>

      <ol>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

      </ol>

</div></td>

    </tr>

    <tr>

   
<style type="text/css">
#box4 {
background: #808080;
width: 300px;
height: 300px;
padding: 30px;
border-radius: 20px;
}
</style>
<td>
<div id="4"><h1>Abilit&agrave</h1>
  <ol>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

      </ol></div></td>

     

    </tr>

    <tr>

     
<style type="text/css">
#box5 {
background: #808080;
width: 300px;
height: 300px;
padding: 30px;
border-radius: 20px;
}
</style>
<td>
<div id="5"><h1>Azione</h1>

  <ol>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

      </ol>
</td></div>
<style type="text/css">
#box6 {
background: #808080;
width: 300px;
height: 300px;
padding: 30px;
border-radius: 20px;
}
</style>
<td>
<div id="6">
      <h1>Avventura</h1>
<ol>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

      </ol>
</div>
</td>

    </tr>

    <tr>

   
<style type="text/css">
#box7 {
background: #808080;
width: 300px;
height: 300px;
padding: 30px;
border-radius: 20px;
}
</style>
<td>
<div id="7"><h1>Giochi Scaricabili</h1>

<ol>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

      </ol>

</td></div>
<style type="text/css">
#box8 {
background: #808080;
width: 300px;
height: 300px;
padding: 30px;
border-radius: 20px;
}
</style>
      <td><div id="8"></td></div>

    </tr>

    <tr>

  
<style type="text/css">
#box9 {
background: #808080;
width: 300px;
height: 300px;
padding: 30px;
border-radius: 20px;
}
</style><td><div id="9"><h1>Giochi per Femmine</h1>
  <ol>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

      </ol></td></div>
<style type="text/css">
#box10 {
background: #808080;
width: 300px;
height: 300px;
padding: 30px;
border-radius: 20px;
}
</style><td>
<div id="10">
      <p valign="top" align="left">Anche tu puoi fare parte di questo spazio pubblicitario clicca:</p> <a href="http://www.infinitegames.altervista.org/pubblicita.html">qui</a>
<br>Altri siti lo hanno gi&agrave fatto come:<br><a target="_blank" href="http://www.pop3-smtp.com" title="Pop3, Smtp, Nntp, Imap4">Pop3 Smtp</a>
 </td></div>

    </tr>
</table>
</div>
</html>

ù
é l'ultima parte della pagina
all'inzio per le prime due celle sembrava funzionare ma poi andando a capo con <tr> mi cancella tutte le celle colorate, perchè?????
P.S. lo sfondo delle celle deve essere modificato e me ne servono 2 per ogni riga
la tabella mi serve per metterne 2 per ogni riga e andare a capo
la pagina indicata è una di prova la trovate qui http://www.infinitegames.altervista.org/prova.html

[radiodelmomento]

Intanto non capisco perché tu crei tutti questi stili quando ne serve uno solo, dato che sono tutti uguali.
Poi ci sono un sacco di TAG non chiusi e altri messi al posto errato.
Inoltre per scrivere "à" devi scrivere "&agrave;" con il punto e virgola e non "&agrave".
Comunque, il tuo problema è che nell'id scrivi "2" e non "box2".
Dovresti sistemare tutto.
Ciao!

ops scusa non me ne ero accorto che avevo scritto solo 2