title: Border bottom of top row is hiding the border property of 2nd row
body: <p>I am facing one problem with table row border styles.</p>
  
  <p>Suppose, I have 2 rows in a table.</p>
  
  <p>1st row has <code>border-bottom: 0.2rem solid #F1F2F2</code>.</p>
  
  <p>2nd row I want to highlight with <code>border: 1px solid red</code> based on some condition to highlight the row using <code>[ngClass]</code> property.</p>
  
  <p><strong>Actual Result</strong> is 2nd is highlighted with 3 sides (left, right and bottom) but not top as 1st row's border-bottom making it to hide.</p>
  
  <p><strong>Expected</strong>: Should highlight all sides of the row.</p>
  
  <p>Please look below image for the problem I'm facing</p>
  
  <p>CSS:</p>
  
  <pre><code>.table__row {
      border-bottom: 0.2rem solid #F1F2F2;
  }
  .tr-outline {
     boder: 1px solid red;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <p><code>&lt;tbody class="table__body"&gt;
          &lt;tr class="table__row" *ngFor="let item of entries" [ngClass]="{'tr-outline': highlightRow(item.isHighlight)}"&gt;
             &lt;td class="td-name"&gt;{{ item.name}}&lt;/td&gt;
             &lt;td class="td-cif"&gt;{{item.id}}&lt;/td&gt;
             &lt;td class="td-icon"&gt;{{item.excercise}}&lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;</code></p>
  
  <p><a href="https://i.stack.imgur.com/W06yU.jpg" rel="nofollow noreferrer">Table row style</a></p>