title: CSS: Change Border Color of the table header
body: <p>Just wanted to ask how can I change the border color of the outer portion of table head. Those border between table head should remain white in color. I've done several changes but it seems the default gray did not change. Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table th {
    background-color: #3886BE;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="table-responsive" id="query_result" style="margin-left:10px;margin-right:10px;"&gt;
  
    &lt;form&gt;
      &lt;table class="table table-bordered table-responsive"&gt;
        &lt;tr&gt;
          &lt;th&gt;No.&lt;/th&gt;
          &lt;th&gt;Details&lt;/th&gt;
          &lt;th&gt;S.O.&lt;/th&gt;
          &lt;th&gt;Client Name&lt;/th&gt;
          &lt;th&gt;Company&lt;/th&gt;
          &lt;th&gt;Service Avail&lt;/th&gt;
          &lt;th&gt;Category&lt;/th&gt;
          &lt;th&gt;Received&lt;/th&gt;
          &lt;th&gt;Completion&lt;/th&gt;
          &lt;th&gt;Remaining&lt;/th&gt;
          &lt;th&gt;Timeline&lt;/th&gt;
          &lt;th&gt;Status&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>You may check the image below for reference. I leave some caption there for additional details.
  <a href="https://i.stack.imgur.com/K61SH.png" rel="nofollow noreferrer">enter image description here</a></p>