Question 45205 in Html Question posted in
Some basic documentation can be found here.

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

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:

.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;
}
<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>

Here is my problem:

I want a smooth border color.

Tags:

2

Answers


  1. 0

    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:

    .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;
    }
    <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>
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search