Image inner border

When dealing with user avatars, it can be challenging to display them all in a clear way. That's because some images are too light, thus it might blend with the background underneath it, specially if it's a white one.

Consider the following figure.

Notice how in the first row, the second avatar is blended with the white background. However, when we have a border, it's much better.

We can prevent that in advance and add an inner border to the image. Not only that, but we cal also think about dark mode too!

In CSS, we can mimic the inner border by using an inset box-shadow. The challenge though is that it's not possible to add an inset shadow to an <img> element. As a result, we need to wrap the image in another element and apply the inner shadow to it.

<div class="card__avatar">
  <img src="assets/shadeed.jpg" alt="" />
  <div class="border"></div>
</div>

.card__avatar {
  position: relative;
}

.card__avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.border {
  position: absolute;
  width: 56px;
  height: 56px;
  border: 2px solid #000;
  border-radius: 50%;
  opacity: 0.1;
}