Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 round dots seamlessly across browsers?

Reference Test

  • on jsFiddle
like image 643
qualle Avatar asked Jul 01 '12 08:07

qualle


People also ask

How do I make a custom dashed border in CSS?

IF you're only targeting modern browsers, AND you can have your border on a separate element from your content, then you can use the CSS scale transform to get a larger dot or dash: border: 1px dashed black; border-radius: 10px; -webkit-transform: scale(8); transform: scale(8);

Which CSS code snippet set the border to dotted line?

To set the dotted line for the border, use the border-style property.


2 Answers

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

SVG dotted round border

Demo

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

References (on Mozilla Developer Network)

  • stroke-dasharray
  • stroke-linecap
like image 124
Eliran Malka Avatar answered Oct 02 '22 13:10

Eliran Malka


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;
}
like image 22
ozbassplayer Avatar answered Oct 02 '22 14:10

ozbassplayer