title: CSS outside table border of different color than inside borders between table cells
body: <p>I have a table like this:</p>
  
  <pre><code>    &lt;table&gt;
          &lt;caption&gt;Caption:&lt;/caption&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;td style="width: 65%;"&gt;A&lt;/td&gt;
  
                  &lt;td class="center" style="width: 5%;"&gt;B&lt;/td&gt;
                  &lt;td style="width: 15%;"&gt;C&lt;/td&gt;
                  &lt;td style="width: 15%;"&gt;D&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
  
                  &lt;td &gt;aaa&lt;/td&gt;
                  &lt;td&gt;bbb&lt;/td&gt;
                  &lt;td&gt;ccc&lt;/td&gt;
                  &lt;td&gt;ddd&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>With styles like this:</p>
  
  <pre><code>table {
      width: 100%;
      margin-top: 1em;
      border-collapse: collapse;
      border: 1px solid #111;
  }
  table th, table td {
      vertical-align: middle;
  }
  table td {
      border: 1px solid #888;
      padding: .2em .4em;
  }
  </code></pre>
  
  <p>What I have trying to achieve is to have a border around the table of a different color than the border inside the table.</p>
  
  <p>I want the outside border to be darker (#222) than the inside border (#888).</p>