These differences are expected due to the way each browser displays it, and we cannot control it. If you need to support FireFox, then I would suggest abandoning this method because FF cannot display dotted borders at the moment .
It is best to use SVG to achieve this, because SVG allows you to strengthen control over dots / dashes through the use of the stroke-dasharray property.
The following is an example snippet: (I give this , although you did not check out the SVG because SVG is probably best suited for such things, and this example may help you.)
svg{ height: 100px; width: 100px; } circle { fill: transparent; stroke: green; stroke-width: 3; } .solid{ stroke-dasharray: none; } .dashed { stroke-dasharray: 8, 8.5; } .dotted { stroke-dasharray: 0.1, 12.5; stroke-linecap: round; } div { height: 100px; width: 100px; color: green; font-weight: bold; text-align: center; line-height: 100px; }
<svg viewBox="0 0 120 120"> <circle cx="55" cy="55" r="50" class="solid" /> <foreignObject x="5" y="5" height="100px" width="100px"> <div>100</div> </foreignObject> </svg> <svg viewBox="0 0 120 120"> <circle cx="55" cy="55" r="50" class="dashed" /> <foreignObject x="5" y="5" height="100px" width="100px"> <div>100</div> </foreignObject> </svg> <svg viewBox="0 0 120 120"> <circle cx="55" cy="55" r="50" class="dotted" /> <foreignObject x="5" y="5" height="100px" width="100px"> <div>100</div> </foreignObject> </svg>
SVG support is available in almost all versions of Chrome, Firefox, Safari, Opera, and IE9 +.
Using foreignObject to place text is something that was easier for me to use and style, but it doesn't work in IE. Thus, you can use the text SVG element, as in the snippet below.
svg{ height: 100px; width: 100px; } circle { position: relative; fill: transparent; stroke: green; stroke-width: 3; } .solid{ stroke-dasharray: none; } .dashed { stroke-dasharray: 8, 8.5; } .dotted { stroke-dasharray: 0.1, 12.5; stroke-linecap: round; } text { width: 100px; text-anchor: middle; fill: green; font-weight: bold; text-align: center; }
<svg viewBox="0 0 120 120"> <circle cx="55" cy="55" r="50" class="solid" /> <text x="55" y="60"> 100 </text> </svg> <svg viewBox="0 0 120 120"> <circle cx="55" cy="55" r="50" class="dashed" /> <text x="55" y="60"> 100 </text> </svg> <svg viewBox="0 0 120 120"> <circle cx="55" cy="55" r="50" class="dotted" /> <text x="55" y="60"> 100 </text> </svg>
To support lower versions of IE, you can look at some libraries, such as this one or link to this SO answer .
This can be done using CSS using properties other than border , but they will require either a lot of shadows or pseudo-elements, and will not be very useful for large circles.
Using a pseudo-element approach would require CSS transform and therefore still would not support IE8 or less without using other libraries.
The approach with clear shadows, although it has better browser support, is not very scalable. The following is an example snippet for creating point borders using the box-shadow approach. This has been adapted from the answer by the Pragmatist in this thread .
div { position: relative; height: 100px; width: 100px; margin: 10px; text-align: center; line-height: 100px; border-radius: 50%; } .dotted { box-shadow: 0px -55px 0px -48px blue, 0px 55px 0px -48px blue, 55px 0px 0px -48px blue, -55px 0px 0px -48px blue, -39px -39px 0px -48px blue, 39px -39px 0px -48px blue, -39px 39px 0px -48px blue, 39px 39px 0px -48px blue, -22px -51px 0px -48px blue, -51px 22px 0px -48px blue, 51px -22px 0px -48px blue, -51px -22px 0px -48px blue, 51px 22px 0px -48px blue, 22px 51px 0px -48px blue, -22px 51px 0px -48px blue, 22px -51px 0px -48px blue; }
<div class="dotted"> 100 </div>
Harry May 7 '15 at 6:07 2015-05-07 06:07
source share