How can I fix this border?

Question

I need that border like a circle, but the border-radius is not helping with this. This is a pagination bar and when I scroll the page down it moves for the correct icon, it is working, but the border is not setted properly.

ps.: if you have any suggestion for this pagination does not broken because the 'top' setted to '44vh', feel free to share.

This is the css code:

.nav-bar {
  display: flex;
  flex-direction: column;
  gap: 44px;
  position: fixed;
  right: 48px;
  top: 44vh;
}

.nav-bar-selection {
  width: 48px;
  height: 48px;
  border: 6px solid transparent; /* Set the border to be transparent */
  border-image: linear-gradient(to right, #CC112C, #FCBE30); /* Set the gradient */
  border-image-slice: 1; /* Slice the border image into 9 pieces (1x1 grid) */
  position: fixed;
  right: 30px;
  top: 42vh;
  transition: top ease-out 0.2s;
}

.nav-icon {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  cursor: pointer;
  transition: .2s ease;
}

.nav-icon:hover {
  transition: .2s ease;
  transform: scale(114%);
  background-color: #fff;
}

<nav class="nav-bar">
    <div class="nav-bar-selection"></div>
    <a href="#first-page-pagination" id="first-nav-icon"><div class="nav-icon"></div></a>
    <a href="#second-page-pagination" id="second-nav-icon"><div class="nav-icon"></div></a>
    <a href="#third-page-pagination" id="third-nav-icon"><div class="nav-icon"></div></a>
</nav>

I just tried the "border-image: conic-gradient;" and nothing.