Как закруглить края картинки в CSS

Для закругления краев картинки в CSS можно использовать свойство border-radius.

HTML:

<img class="my-image" src="my-image.jpg">

CSS:

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

Этот код закругляет края изображения в виде круга путем задания радиуса границы в 50%.

HTML:

<img class="my-image" src="my-image.jpg">

CSS:

.my-image {
  border-radius: 10px;
}

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

Также можно задать радиусы границ отдельно для каждого угла. Например:

HTML:

<img class="my-image" src="my-image.jpg">

CSS:

.my-image {
  border-radius: 10px 20px 30px 40px; /* верхний левый, верхний правый, нижний правый, нижний левый */
}

Этот код создает закругление углов изображения со следующими радиусами: верхний левый — 10 пикселей, верхний правый — 20 пикселей, нижний правый — 30 пикселей, нижний левый — 40 пикселей.

Надеюсь, эта информация была вам полезна!