Как правильно сделать круг в круге?

Question

[cracker-test]

Подскажите, как правильно сделать круг в круге при помощи css?

Answer 1

[MrColdCoffee]

<div class="circle" ></div>

.circle{
  width: 30px;
  height: 30px;
  border-radius: 20px;
  background-color: #000;
  border: 5px solid #FFF;
  outline: 5px solid green;
}

Comments

[Андрей Федоров]

Не надо outline использовать, он не для этого. https://codepen.io/aliencash/pen/BamgRYY

[ambisinister One]

cracker-test,

<svg height="100" width="100">
<circle cx="50" cy="50" r="18" stroke="green" stroke-width="5" fill="white" />
<svg height="100" width="100">
<circle cx="50" cy="50" r="11" fill="black"  /></svg> </svg>

Тот-же результат

Answer 2

[DanielTonne]

Например, так

Answer 3

[Олег]

Как вариант