Question

I’m seeing a rendering issue for a 2px dotted border similar to CSS dotted border issue in adjacent columns in a table rendered as dash in Chrome but on desktop Safari and Chrome. I tried several widths and it happens in all of them

This is a sample:

the vertical line ending has the same issue but it’s out of the picture.

Sample:
http://jsfiddle.net/bcdQQ/

Answer 1

This issue happens if the width is not divisible by the border-width.

This works:
http://jsfiddle.net/bcdQQ/5/ (i made it a little bit bigger, for better sight)

#prodpre { 
    border-bottom: #555 5px dotted;
    height: 20px;
    margin: 0px 0px 2px 0px;
    padding-bottom: 10px; 
    width: 505px;
}

So, the only possibility to catch this issue, would be a javascript solution, which corrects the width of the div, so it is divisible by the border-width (cause it is dynamically in your example).