title: CSS table first-child and last-child border-radius not working
body: <p>I'm trying to make a table with border-radius. Since I have different settings in the first and last row of the table (tr:first and last-child), I've created them separately in CSS file. Every setting is right like I want except for border-radius. </p>
  
  <p>The code goes like this:</p>
  
  <pre><code>.tables
      {
          letter-spacing: 0.10em;
          border-collapse: collapse;
          width: 100%;
          color: #919499;
          background-color: #2f333b;
          table-layout: fixed;
          font-size: 14px;
      }
  
      .tables tr:first-child 
      {
          letter-spacing: 0.15em;
          border-collapse: collapse;
          font-size: 18px;
          background-color: #e97770;
          border-top-left-radius: 0.5em !important;
          border-top-right-radius: 0.5em !important;
          -webkit-border-top-right-radius: 0.5em !important;
          -webkit-border-top-left-radius: 0.5em !important;
          -moz-border-top-right-radius: 0.5em !important;
          -moz-border-top-left-radius: 0.5em !important;
          width: 100%;
          table-layout: fixed;
      }
  
      .tables tr:last-child
      {
          border-bottom-left-radius: 0.5em;
          border-bottom-right-radius: 0.5em;
          -webkit-border-bottom-right-radius: 0.5em !important;
          -webkit-border-bottom-left-radius: 0.5em !important;
          -moz-border-bottom-right-radius: 0.5em !important;
          -moz-border-bottom-left-radius: 0.5em !important;
      }
  </code></pre>
  
  <p>Any ideas how to achieve this?</p>