CSS dotted border render issue

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

Answer 1

could you put it in a smaller container div with overflow hidden?

Answer 2

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).