border-bottom dotted has solid line at start/end in Chrome

Question

I've created a fiddle to illustrate this: https://jsfiddle.net/9tu8n4y5/

The markup is pretty simple as it's supposed to look like a dotted line to separate bits of content:

.dot {
    border-bottom: dotted 2px #022169;
}

<div class="dot"></div>

In Firefox 55.0.3 this looks as I'd expect it to:

However, in Chrome 61.0.3163.91 it has a strange "solid line" at the start and end:

Closer:

Does anyone have any ideas why this is? I guess it's a browser specific problem that cannot be changed with CSS?

I am using a 27" 5k Retina iMac. However my second display is a non-Retina screen and the results are the same on that.

Safari 10.0.3 gives the same result as Firefox.

Edit (after posting) - reported to Chromium Bugs team, https://bugs.chromium.org/p/chromium/issues/detail?id=766977

Answer 1

I haven't tested this solution on retina, but you can play around with radius values to get exactly/closer to what you want. This is how I have dealt with the bug:

.border-bug {
  border-bottom: 2px dotted red;
}

.no-border-bug {
   border-bottom: 2px dotted red;
   border-left: 2px solid transparent;
   border-top: 1px solid transparent;
   border-radius: 4px 1px 3px 3px;
}

<div class="border-bug">
Bug Bug Bug.
</div>
<br>
<div class="no-border-bug">
Almost no bug.
</div>

This bug seems like have been around since ages.