CSS - Circle with Ring

by leethelobster

HTML

<div class="ring"></div>

CSS

.ring {
  background: red;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  position: relative;
}

.ring:before {
  border-radius: 50%;
  border: 5px solid #000;
  content: "";
  position: absolute;
  top: -7px;
  bottom: -7px;
  left: -7px;
  right: -7px;
}