title: How to get a rounded corner table with a body in different color with CSS?
body: <p>I need to make the following table with rounded corner and a table body
  with different color:</p>
  
  <p><img src="https://i.stack.imgur.com/39OIe.png" alt="enter image description here"></p>
  
  <p>This is my table:</p>
  
  <pre><code>&lt;table class="form_caja"&gt;
          &lt;tr&gt;&lt;th&gt;Referidos&lt;/th&gt;&lt;/tr&gt;
  
          &lt;tr&gt;&lt;td&gt;Numero&lt;/td&gt;&lt;td&gt;Companhia&lt;/td&gt;&lt;td&gt;Nombre&lt;/td&gt;&lt;td&gt;Apellido&lt;/td&gt;&lt;td&gt;Email&lt;/td&gt;&lt;/tr&gt;
  
              &lt;tr&gt;&lt;td&gt;0976343344&lt;/td&gt;&lt;td&gt;PERSONAL&lt;/td&gt;&lt;td&gt;f&lt;/td&gt;&lt;td&gt;asd&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
  
              &lt;tr&gt;&lt;td&gt;0992123123&lt;/td&gt;&lt;td&gt;CLARO&lt;/td&gt;&lt;td&gt;dA&lt;/td&gt;&lt;td&gt;de&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
  
              &lt;tr&gt;&lt;td&gt;0963555457&lt;/td&gt;&lt;td&gt;CLARO&lt;/td&gt;&lt;td&gt;f&lt;/td&gt;&lt;td&gt;sdf&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
  
              &lt;tr&gt;&lt;td&gt;0963555345&lt;/td&gt;&lt;td&gt;CLARO&lt;/td&gt;&lt;td&gt;e&lt;/td&gt;&lt;td&gt;de&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
  
      &lt;/table&gt;
  </code></pre>
  
  <p>and this is the style:</p>
  
  <pre><code>.form_caja {
      width: 524px;
      padding-top: 8px;
      padding-bottom: 15px;
      margin: 0 auto 20px auto;
      background: #446bb3;
  
       border-radius: 15px;
  
      -moz-border-radius: 15px;
  
      -webkit-border-radius: 15px;
      color: #446bb3;
  }
  </code></pre>
  
  <p>this is what I get so far:</p>
  
  <p><img src="https://i.stack.imgur.com/IMYev.png" alt="enter image description here"></p>
  
  <p>How should I do to get a table like the desired one?</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/dQY9D/" rel="nofollow noreferrer">http://jsfiddle.net/dQY9D/</a></p>