Чтобы создать круглое изображение с помощью CSS, вы можете использовать несколько методов. Вот несколько подходов:

Метод 1: использование свойства border-radius

.circle-image {
  border-radius: 50%;
}

Этот метод устанавливает радиус границы элемента равным 50 %, благодаря чему он выглядит как круг.

Метод 2: использование свойства «clip-path»

.circle-image {
  clip-path: circle(50%);
}

Свойство clip-pathс функцией circle()позволяет создать круговой контур обрезки. Аргумент «50%» указывает, что круг должен занимать 50% ширины и высоты элемента.

Метод 3: использование свойства «mask-image»

.circle-image {
  mask-image: radial-gradient(circle at center, transparent 50%, black 50%);
}

Этот метод применяет к изображению маску радиального градиента, где прозрачная часть создает круглую форму. Градиент определяется как круг в центре изображения, прозрачная часть которого занимает 50 % площади.

Метод 4. Использование SVG

.circle-image {
  mask: url('circle.svg') center/contain no-repeat;
}

В этом методе вы можете использовать файл SVG круглой формы в качестве маски для изображения. В файле SVG должен быть определен элемент круга, охватывающий всю область изображения.

Метод 5: использование фонового изображения

.circle-image {
  background-image: url('image.jpg');
  background-size: cover;
  border-radius: 50%;
}

Этот метод включает установку изображения в качестве фонового изображения и применение свойства background-size: Cover, чтобы гарантировать заполнение контейнера. border-radius: 50%создает круглую форму.