JSFiddle - React, Tailwind, and code Playground

by DelphinPRO

HTML

<div></div>

CSS

body {
  background: linear-gradient(to right, red, orange, yellow, green, blue, magenta);
  min-height: 100vh;
  padding: 1rem;
  display: flex;
  box-sizing: border-box;
	margin: 0;
}

div {
  margin: auto;

  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  padding: 15px;
  border: 2px solid white;
  background: red;
  background-clip: content-box;
  position: relative;
}

div::before {
  content: '';
  position: absolute;
  width: 130px; /* 100 + 15 + 15 */
  height: 130px;
  border-radius: 100%;
  border: 2px solid white;
  left: -19px; /* 15 + 2 + 2 */
  top: -19px;
  pointer-events: none;
}