Image inner border

When dealing with user avatars, it can be challenging to display them in a clear way and keep them consistent with the view. Because some avatars have high brightness, some have low brightness, and some may be in jpg format and some in png format, they have different support for transparency, which may be mixed with the background color.

avatar.png

avatar.jpg

Because the avatar has a transparent part, it blends with the background color, and it is not visible that the avatar UI is circular, and it loses integrity with other parts.

For this, we can add a border to make the UI look more comfortable.

.avatar {
  position: relative;
}
.avatar::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  display: block;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #000;
  opacity: 0.1;
}

avatar.png

avatar.jpg