title: css3 rounded border table
body: <p>im trying to make rounded border table.
  but im getting little problem with border, 
  the table border is not rounded..</p>
  
  <pre><code>grid1 { width:100%; border:1px solid #000}
  </code></pre>
  
  <p>here is the example
  <a href="http://jsfiddle.net/NHNFx/" rel="nofollow">http://jsfiddle.net/NHNFx/</a></p>
  
  <pre><code>&lt;table class="grid1"&gt; 
      &lt;tr&gt;
          &lt;th&gt;Salutation&lt;/th&gt;
          &lt;td&gt;MR&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;First Name&lt;/th&gt;
          &lt;td&gt;Greg&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;Last Name&lt;/th&gt;
          &lt;td&gt;Oden&lt;/td&gt;
      &lt;/tr&gt; 
  &lt;/table&gt; 
  
  table { border-collapse:collapse; border-spacing:0; border:0; }
  
  
  .grid1 { width:100%; border:1px solid #000}
  .grid1 tr th { width:115px; padding:20px; background:blue; border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8;}  
  .grid1 tr td { padding:20px; background:#f9f9f9; border-bottom:1px solid #c8c8c8; } 
  
  .grid1 tr:first-child th  { border-radius:2em 0 0 0;   }
  .grid1 tr:last-child th  {  border-radius:0 0 0 2em ;  }
  .grid1 tr:first-child td:last-child  { border-radius:0 2em 0 0; }
  .grid1 tr:last-child td:last-child  {  border-radius:0 0 2em 0 ;  }
  </code></pre>
  
  <p>plz help me...</p>