title: Chrome User Agent Stylesheet table border-color not overridden
body: <p>I have a table that's markup resembles this</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;Label&lt;/th&gt;
      &lt;td&gt;Data&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Label&lt;/th&gt;
      &lt;td&gt;Data&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I have CSS making borders on the <code>th</code>, <code>td</code> with shorthand border declaration. On the first <code>th</code> my top and left border color is getting overridden by the border-color on the Chrome User Agent Stylesheet. See the image below:</p>
  
  <p><img src="https://i.stack.imgur.com/sXB3i.jpg" alt="Where it&#39;s overriding my styles, this is showing styles for the th"></p>
  
  <p>To fix this issue I have tested and tried the following:</p>
  
  <ol>
  <li>Confirmed that the doctype is there <code>&lt;!DOCTYPE html&gt;</code></li>
  <li>Added table, tr, th, td { border-color: #fff; } to attempt to override the style</li>
  <li>Changed the first <code>th</code> to a <code>td</code>, which removed the <code>background-color</code>, and fixed the issue. Until I added the <code>background-color</code> back to the <code>td</code>, which broke it again.</li>
  <li>Removed the background color from all <code>th</code>'s, which fixed the issue, but won't work for the design.</li>
  <li>Isolated the <code>th</code> in question with a class and tried to override border-color with important. It did not work, because the border color it's using is coming from table, not the th or td.</li>
  </ol>
  
  <p>I am looking for possibly directions I'm missing to fix this issue, I cannot share more detailed code due to the nature of the work I do (government applications), but I can provide more detail if needed</p>