虚线边框在 chrome 中显示为“实线”

Question

我在 tbody tr 中有一个输入字段。

我在悬停时（使用 CSS）设置了它的边框。它在 Firefox 上运行良好，但在 Chrome 中不起作用。

在 Chrome 中，边框线仅在 3px 或更大时才会显示为“虚线”。如果它较小，如示例代码 (2px) 中所示，则显示为“实心”。

有关如何使其在 2px 或更小的范围内工作的任何想法？

input[name="task"].form-control:hover{
       background-color: #f0f2f5;
       border: 2px dotted lightgray !important;
       border-radius: 10px;
    }   

        <table class="table table-hover small-text" id="tb" >
            <thead id="table-header">
                <tr class="tr-header"">
                    <th style="text-align: center;">Task</th>
                </tr>
            </thead>
            <tbody>

              <tr>
                  <!--task-->
                  <td class="tasks-cell">
                      <input type="text" name="task" class="form-control
                      task-input" value = "test test">
                  </td>
              </tr>
            </tbody>
            <tfoot>
            </tfoot>
        </table>