html - Creating dashed line objects with CSS after designing -

html - Creating dashed line objects with CSS after designing -

i trying code more of designs html5 , css3 curious know objects. wanted know how can duplicate image css, preferably within 1 class, if can done. best way go doing this?

this css 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%; }

css html