riv riv - 1 year ago 79
CSS Question

Dotted lines in Chrome

For some reason, when using a dotted border style to make a line, Chrome renders the ends as double dots, which looks awful especially on short lines:



.text {
border-bottom: 2px dotted #000;
}

<span class="text">Hi</span><br/>
<span class="text">lll</span><br/>
<span class="text">22</span><br/>





Even something as simple as
border-bottom: 2px dotted #000;
doesn't work. I saw some article suggest setting left/right borders to transparent, but that looks even worse at it cuts off small corners of the dots.

It looks fine in Firefox, though. Is there any way to make it look as good in Chrome, or am I out of luck?

Answer Source

You could absolutely position a pseudo element with the border properties and offset the position by the "dot" width to hide the first and last dots that are rendering as double dots.

.text {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.text::after {
  border-bottom: 2px dotted #000;
  content: '';
  position: absolute;
  bottom: 0; left: -2px; right: -2px;
}
<span class="text">Hi</span><br/>
<span class="text">lll</span><br/>
<span class="text">22</span><br/>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download