How to create dotted border with round dots in WebKit browsers?

border, css, html, webkit

Solution

A natively supported solution is currently lacking, as the specification does not define these properties explicitly, and leaves it for the browser's implementation.

You may, however, use SVG to create the border, as it offers full control over the characteristics you're after.

Draw a line, than define its `stroke-dasharray` and `stroke-linecap` attributes to achieve the desired effect.

Example Code Snippet

<line 
    x1="40" x2="260" 
    y1="100" y2="100" 
    stroke="#5184AF" 
    stroke-width="20" 
    stroke-linecap="round" 
    stroke-dasharray=".001, 30" />

Result Snapshot

Demo

- http://jsfiddle.net/eliranmal/hsfxS/

References (on Mozilla Developer Network)

- `stroke-dasharray`

- `stroke-linecap`

Problem

In WebKit driven browsers, e.g. Safari, Chrome, borders with their style declared as `dotted` are rendered with square dots instead of round. Is there any way to force rendering of round dots seamlessly across browsers? Reference Test - on jsFiddle

Original source