Safari does not support CSS for circular avatars

Question

My blog is using gatsby React template, but when I open it on Safari (iPhone or Mac), the avatar image is not round. Simple code blog

This is the style I use for my avatar

.bio-avatar {
  margin-right: var(--spacing-4);
  margin-bottom: var(--spacing-0);
  min-width: 50px;
  border-radius: 100%;
 }

Answer 1

You should change your CSS code with this. The problem is with the border-radius value.

.bio-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}