How To Create Dotted Border With Round Dots In WebKit Browsers?

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 r

Solution 1:

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

Solution 2:

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;
}

Solution 3:

border-image would be a possibility: http://www.css3.info/preview/border-image/

Solution 4:

Based on ozbassplayer's solutions (thank you).

How to use in sass to generate longer lines without needing of counting dots.

Only found dissadvantage is cutting of dots when line is not 'ideally' long.

  &:after {
    font-family: 'FontAwesome';  
    display: block;  
    font-size: 6px;  

  
    letter-spacing: 3px;      // to adjust space between dots
    white-space: nowrap;      // force to keep in one line  
    overflow: hidden;         // avoid rendering dots out of container
    width: 100%;

    $content: ' ';
    @for $i from 1 through 50 {
      $content: $content + " \f111";
    }

    content: $content;
  }