UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.98 Safari/537.36

Steps to reproduce the problem:
1. Create a 3-rowed table with 4 columns, such as:
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="3"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

2. add CSS as:
tr {
  border-top: 1px dotted red;
}
td {
  padding: 10px;
}

What is the expected behavior?
A uniform dotted red border is displayed above each table row.

What went wrong?
A solid or non-uniform border is displayed.

Did this work before? N/A 

Chrome version: 54.0.2840.98  Channel: stable
OS Version: OS X 10.12.0
Flash Version: Shockwave Flash 23.0 r0

Change the border-width to something larger than 1px to show off better exactly what is happening. The border isn't actually solid, it's just not anti-aliased so it appears to be.