Как сделать круглую фотографию css

Чтобы сделать круглую фотографию с помощью CSS, нужно использовать свойство «border-radius» и задать ему значение, равное половине высоты или ширины элемента.

Например, если нужно сделать круглую фотографию с размерами 200×200 пикселей, можно добавить следующий CSS:

.my-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

Здесь мы указали ширину и высоту фотографии, а свойство «border-radius» задали значение 50%, которое задает радиус закругления равным половине ширины или высоты элемента (в данном случае 100 пикселей).

Если фотография имеет разные размеры по ширине и высоте, можно выбрать одно из значений и использовать его для обоих свойств. Например, для фотографии 150×200 пикселей можно использовать следующий CSS:

.my-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

Здесь мы использовали значение ширины для задания высоты элемента, чтобы обеспечить круглую форму фотографии.

Также можно использовать другие значения для «border-radius», чтобы создавать различные формы элементов. Например:

.my-element {
  border-radius: 10px 50px 20px 5px; /* значение радиуса для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов соответственно */
}

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