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

Question

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

Answer 1

I also had this problem but I only needed three round dots under my menu item. So I just used a terrible hack, but it worked: First of all I hooked in FontAwesome using @import Then added the round dot characters as content in the CSS:

#nav ul .current_page_item a:after {
    font-family: 'FontAwesome';
    content: "\f111  \f111  \f111";
    font-size: 6px;
    display: block;
}