How did I made a circle withing another circle

In our recent sprint, biGENIUS design team embarked on an exciting journey to enhance user interaction by introducing a sleek stepper view, complete with eye-catching stepper elements. Picture this: a single circle adorned with a numerical indicator and a stylish outer border—cool, right?

Now, the challenge was to bring this vision to life using CSS. Here's the breakdown of my approach:

Firstly, the color scheme and border of the stepper are intricately tied to its current status—whether it's active or not. While various methods, including different SVGs, crossed my mind, I opted for a more elegant solution: leveraging the power of pure CSS.

And so, the question arose: how to achieve this visually appealing effect? Let's dive into the process, starting with the creation of the circle containing the numerical identifier—seemingly simple, yet a crucial step in realizing the desired aesthetic.

<div class="stepper-step__number">1</div>

.stepper-step__number {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 24px;
  color: #f3f3f3;
  height: 48px;
  width: 48px;
  min-width: 48px;
  border-radius: 50%;
  background-color: #44a5d8;
}

The outcome:

Now, onto the more challenging aspect—the creation of that elusive white inner circle.

My initial pondering led me down the path of considering another circle element with a simple white border, nested within the outer circle. However, I realized I was unnecessarily complicating the process.

---

It dawned on me: why not employ the subtle power of box-shadow to achieve the desired effect? The solution revealed itself through the use of a pseudo-element, a moment of coding clarity that filled me with a sense of pride. This revelation became the driving force behind sharing my experience in this post, a testament to the joy of overcoming coding challenges and discovering elegant solutions.

<div class="stepper-step__number active">2</div>

.stepper-step__number.active {
  position: relative;
}

.stepper-step__number.active::after {
  content: '';
  position: absolute;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #fff;
}

---

I am so proud of myself

---

If you want to try it, check it out on stackblitz

Would you have done this differently?
Tell me how on the comments
(probably with tailwind this could be done with some simple things right?)