When I set the border radius, the color of the border is fade out, its looks buggy. How to solve this?

I have created simple circles using border radius 50% but the color of border is fading means color is spread out. How to Solve this ?, I have tried to create border using ::after but that doesn't work.

Here is my code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.category-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.category-item {
  margin-bottom: 10px;
  padding: 15px;
}

.image-box {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: table;
  position: relative;
  margin: 0 auto 24px;
  background: #FBF4F3;
  border: 1px solid #AF3D78;
}

.category-title {
  text-align: center;
}

<!-- language: lang-html -->

<div class="category-row">
  <div class="category-item">
    <div class="image-box"></div>
    <div class="category-title">Fragrance</div>
  </div>
  <div class="category-item">
    <div class="image-box"></div>
    <div class="category-title">Fragrance</div>
  </div>
  <div class="category-item">
    <div class="image-box"></div>
    <div class="category-title">Fragrance</div>
  </div>
  <div class="category-item">
    <div class="image-box"></div>
    <div class="category-title">Fragrance</div>
  </div>
  <div class="category-item">
    <div class="image-box"></div>
    <div class="category-title">Fragrance</div>
  </div>

<!-- end snippet -->

Here is my problem:

<a href="https://i.stack.imgur.com/bZteO.png"><img src="https://i.stack.imgur.com/bZteO.png"></a>

I want a smooth border color.

You seem to be having problems with anti-aliasing on the circle's border. By creating a gradient effect by blending the border and background colors, anti-aliasing is a technique used to soften jagged edges. This occasionally results in the border colour looking faded or dispersed.

Creating the circle border using the outline property rather than the border property is one technique to fix this. Without changing the layout of the element or the content around it, the outline property draws a line outside the element's border edge.

CSS code:

  .image-box {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: table;
  position: relative;
  margin: 0 auto 24px;
  background: #FBF4F3;
  outline: 1px solid #AF3D78;
}

Please open your jsfiddle link on a mobile device and zoom it. It is not fading out. The appearance may be different depending on the resolution and screen size.
Otherwise, you can try increasing the border-width to 2px:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.category-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .category-item {
        margin-bottom: 10px;
        padding: 15px;
    }

    .image-box {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        display: table;
        position: relative;
        margin: 0 auto 24px;
        background: #FBF4F3;
        border: 2px solid #AF3D78;
    }

    .category-title {
        text-align: center;
    }

<!-- language: lang-html -->

<div class="category-row">
    <div class="category-item">
        <div class="image-box"></div>
        <div class="category-title">Fragrance</div>
    </div>
    <div class="category-item">
        <div class="image-box"></div>
        <div class="category-title">Fragrance</div>
    </div>
    <div class="category-item">
        <div class="image-box"></div>
        <div class="category-title">Fragrance</div>
    </div>
    <div class="category-item">
        <div class="image-box"></div>
        <div class="category-title">Fragrance</div>
    </div>
    <div class="category-item">
        <div class="image-box"></div>
        <div class="category-title">Fragrance</div>
    </div>
</div>

<!-- end snippet -->