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 Chrome. I tried several widths and it happens in all of them

This is a sample:

sample

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

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

score 8 · Accepted Answer · answered Jan 11 '12 at 16:30

8

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

answered Jan 11 '12 at 16:30

Armin

15,582
10
47
64

I tried your fiddle, tries 500px with, 10px dot and in chrome and safari get the same issue – Juan Ignacio Jan 11 '12 at 16:54
I try it but got the same issue in iPhone and iPad – Kapil Jun 11 '19 at 12:03

score 0 · Answer 2 · answered Dec 31 '12 at 04:33

0

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

answered Dec 31 '12 at 04:33

BottleRockets

51
1

it may solve some issues but it would be tricky to apply that some times – Juan Ignacio Jan 02 '13 at 02:12

CSS dotted border render issue

2 Answers2

Linked

Related