In css when circle is genreated by css using border-radius propertly then add dashed on border

Question

I am created one circle using border-radius and now i want border dashed but not apply, how can i got dashed border using css.

I have created demo under this Fiddle

Css code:

.round
{ 
background-color: #ddd;
border: 2px dashed #000;
height: 100px;
width: 100px;
border-radius: 50%;
}

Html Code:

<div class="round">

</div>

Answer 1

try this, it works fine in all browsers

div.dotted.round {
  width:20vw;
  height:20vw;
  gborder:solid 3px;
  border-radius:100%;
  position:relative;
  display:flex;  
  justify-content:center;
  align-items:center;
  font-size:2.5vw;
  border:solid rgba(0,0,0,0.2);/*Demo, debug: show me edges */
}
 svg.dotted.round  {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  stroke: #000000; 
  stroke-width: 3px;
  stroke-dasharray:  0.25 4;
  stroke-dashoffset: 8;
  stroke-linecap:round;                                    fill: none;


}

<div class="dotted round firefox">
  <svg viewBox="0 0 103 103" version="1.1"
  xmlns="http://www.w3.org/2000/svg"  class="dotted round firefox">
  <circle cx="50%" cy="50%" r="50" />
</svg>
Hey firefox!<br/>
  is that dotted ?
</div>