8

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?

Iłya Bursov
  • 23,342
  • 4
  • 33
  • 57
riv
  • 6,846
  • 2
  • 34
  • 63

2 Answers2

4

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/>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
  • Thanks, that should work, assuming the problems are only at the ends. – riv Jul 26 '17 at 19:59
  • Actually, `inline-block` messes up vertical alignment if you put any other text on the same line, it works better `vertical-align: bottom` but I'm not sure what other side effects it could have. – riv Jul 26 '17 at 20:05
  • @riv you're welcome. `vertical-align: bottom` should take care of it. – Michael Coker Jul 26 '17 at 20:44
0

If you want to set only the border bottom, why not try text-decoration:underline,

then set the text-decoration-style:dotted

See this https://developer.mozilla.org/id/docs/Web/CSS/text-decoration-style

Luki Centuri
  • 185
  • 1
  • 6
  • It has the exact same issue in Chrome, and the underline is touching the text, which is even worse. Plus compatibility is worse. – riv Jul 26 '17 at 19:59