Rendering issue in Chrome with CSS border style

Question

So I have this table:

I have some JavaScript code that highlights the current plan the user is on, this then changes if they upgrade or downgrade.

When the upgrade button is clicked and the page renders it produces unwanted side effects as shown below:

It's almost as if it applies an extra border-top to every other <td> tag. Now when I refresh the page it works okay. To add to the confusion also when I don't add a border-right and border-left attribute it works fine when the 'Upgrade' or 'Downgrade' buttons are pressed.

I've tested it in Firefox and Safari also, Firefox renders it okay but it's still producing unwanted side effects in Safari.

Does anyone know why this is?

$('#' + params['current_plan']).addClass('current_pricing_plan');`
$(".current_pricing_plan button").prop("disabled", true);`

.current_pricing_plan {
border-bottom: 2px solid #00a6cd!important;
border-left: 2px solid #00a6cd;
border-right: 2px solid #00a6cd;
border-top: 2px solid #00a6cd!important;
background-color: #f4f4f4;
}

The first block of code is the JS and the second is the CSS, i'm using Rails so heres an example of one of the <tr>'s in the html.erb file.

<tr id="750" class="current-pricing-plan">
  <td><strong>£25</strong><span class="smalltxt"> /month</span></td>
  <td><strong>750</strong><span class="smalltxt"> mins&nbsp;included</span></td>
  <td><strong>4p</strong><span class="smalltxt"> /min&nbsp;thereafter</span></td>
  <td class="last-col">
    <button class="btn smallbtn confirm_opener_750-25">
    <span class="hidetextmobile"></span>
    <% if @account.billing_plan.inclusive_minutes > 750 %>
      <span class="your-plan">Downgrade</span><span class="your-plan-none">Your Plan</span>
    <% else %>
       <span class="your-plan">Upgrade</span><span class="your-plan-none">Your Plan</span>
    <% end %>
  </button>
 </td>
</tr>

Answer 1

Better replace your border with outline attribute.

.current_pricing_plan {
outline: 2px solid #00a6cd!important;
}