CSS dotted border renders as dashed in Chrome

Question

I applied \"border-bottom:#F60 dotted .3em;\" to a div and while Firefox renders the dots as round, Chrome shows them as blocky dashes. Any takers?

Answer 1

If it's important that the borders are the same you can look into the CSS3 border image property: http://www.css3.info/preview/border-image/ for Chrome it will be -webkit-border-image:

Answer 2

The specification doesn't define what 'dotted' means to that level of detail. The two browsers just interpret it differently. This is not a problem.

Answer 3

As a graphic designer, this is indeed a problem for me.

:dotted; and :dashed; are specified separately for a reason - a rectangle is not a circle. While it is possible to work around, web builders working at a remove often don't spot the difference. As far as they are concerned, the brief has been met. to be fair, at 1px, it is less of a problem but when heavier weight dotted lines are used as design elements and code is selected over graphics to save on page load, things can go quite wrong.

For those needing a single dotted line that absolutely has to be a true dotted line, I would suggest a div with a small repeating background image. Could also try styling up a <ul> if you want to keep it all code.