JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <span class="round">
  </span>
  
  <span class="round shadow">
  </span>
  
  <span class="round gradient">
  </span>
</div>

CSS

.wrap {
  width: 200px;
  height: 200px;
  background: #344468;
  text-align: center;
}

.round {
  display: inline-block;
  width: 77px;
  height: 77px;
  background: #fff;
  border-radius: 50%;
  box-sizing: border-box;
  border: 7px solid #344468;
}


.round.shadow {
  border: none;
  box-shadow: inset 0 0 0 7px #344468;
}

.round.gradient {
  border: none;
  background: radial-gradient(circle, white 0, white 30.5px, #344468 31.5px);
}