title: CSS Table: bottom borders that don't touch and rounded corners
body: <p>Here's the fiddle for what I'm working on:</p>
  
  <p><a href="http://jsfiddle.net/rSUhL/" rel="nofollow noreferrer">http://jsfiddle.net/rSUhL/</a></p>
  
  <p>I'm trying to replicate this image:</p>
  
  <p><img src="https://i.stack.imgur.com/Mr3bo.png" alt="http://unbouncepages-com.s3.amazonaws.com/www.mastermindtalks.com/d9bpvf-mastermindmindset.png"></p>
  
  <p>I'm pretty close. But for some reason, when I add border-radius to the table, it doesn't round the corners.</p>
  
  <p>Also, is it possible to make it so the bottom-border doesn't touch the side of the boxes?</p>
  
  <p>Here's the CSS:</p>
  
  <pre><code>table {
    border-collapse: collapse;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 18px;
  }
  
  th, td {
    border: 1px solid #d8d8d8;
    border-collapse: collapse;
    padding: 25px;
  }
  
  th {
      text-align: right;
  }
  
  #blank {
      border: none;
  }
  
  caption {
      margin-bottom: 15px;
  }
  
  .blue {
      background-color: #2a9ce0;
      color: #fff;
      border-bottom: 1px solid #55ace0;
  }
  
  .small-text {
      font-size: 13px;
      margin-top: -5px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table&gt;
  &lt;caption&gt;Is Mastermind Talks for you?&lt;/caption&gt;
  &lt;tr&gt;
      &lt;th scope="row"&gt;Learning:&lt;/th&gt;
      &lt;td&gt;Tabloids and Newspapers&lt;/td&gt;
      &lt;td class="blue"&gt;Books, blogs, seminars and peers&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;th scope="row"&gt;Focus:&lt;/th&gt;
      &lt;td&gt;Hourly or Salary&lt;/td&gt;
      &lt;td class="blue"&gt;Cashflow, net worth and network&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;th scope="row"&gt;Financial Goals:&lt;/th&gt;
      &lt;td&gt;To survive until the next payday&lt;/td&gt;
      &lt;td class="blue"&gt;To build passive income streams&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;th scope="row"&gt;Rate of Return:&lt;/th&gt;
      &lt;td&gt;Get Rich Quick&lt;/td&gt;
      &lt;td class="blue"&gt;Long-term&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;th scope="row"&gt;Investments:&lt;/th&gt;
      &lt;td&gt;Liabilities: Cars, houses, etc&lt;/td&gt;
      &lt;td class="blue"&gt;Assets: Yourself, business, etc&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;th scope="row"&gt;Values:&lt;/th&gt;
      &lt;td&gt;Currency&lt;/td&gt;
      &lt;td class="blue"&gt;Legacy&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tfoot&gt;
      &lt;td id="blank"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;strong&gt;Middle Class Mindset&lt;/strong&gt;&lt;br /&gt; &lt;span class="small-text"&gt;(mastermind is not for you)&lt;/span&gt;&lt;/td&gt;
          &lt;td class="blue"&gt;&lt;i class="icon-bulb"&gt;&lt;/i&gt;&lt;strong&gt;Mastermind Mindset&lt;/strong&gt;&lt;br /&gt; &lt;span class="small-text"&gt;(mastermind is for you)&lt;/span&gt;&lt;/td&gt;
  &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>