title: How do I change border color of a single table row?
body: <p>I'm trying to highlight a table row by changing the border color of that individual row. This is my CSS:</p>
  
  <pre><code>    table { border-collapse: collapse;}
  
      td { min-width: 100px; border: 1px solid green; }
  
      .highlight td { border: 1px solid orange; }
  </code></pre>
  
  <p>...and this is my HTML:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="highlight"&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;4&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;5&lt;/td&gt;
          &lt;td&gt;6&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The result is this:
  <a href="https://i.stack.imgur.com/ASvZj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ASvZj.png" alt="enter image description here"></a></p>
  
  <p>The top border remains green. The only way I could get it work was by changing border-bottom color of the TD elements 1 and 2. Is there a more elegant solution? Using the outline property didn't do the trick. Thanks!</p>