Creating dashed line objects with CSS after designing

Question

I am trying to code more of my designs with HTML5 and CSS3 but I was curious to know what some do for their objects. I wanted to know how I can duplicate this image with all CSS, preferably within one class, if it can be done. What is the best way to go about doing this?

Answer 1

This would be the css to get that effect:

div{
  width: 200px;
  height: 200px; 
  border: 2px dashed black;
  margin: 100px;
  border-radius: 50%;
  }
  div:after{
  content: ' ';
  display: block;
  margin: -10px;
    width: 215px;  height: 215px; 
  border: 2px dashed black;
  transform:rotate(16deg);
  border-radius: 50%;

  }

Answer 2

You should use an image for this. Either a gif, png or svg.

While it is technically possible with css by using border: dashed and a high border-radius I would not recommend it as different browsers implement dashed borders differently. There is no set w3 standard as to how browser rendering engines should render this. You would also need two divs and rotate one of them.

Notably Firefox and the android browser will totally fail to show this correctly. For example Firefox will show a solid line (not dashed) on rounded corners when using corner-radius.

I recently made a visual css builder which would show this quite quickly here - try playing with the different settings in different browsers.