Для закругления краев картинки в 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 пикселей.
Надеюсь, эта информация была вам полезна!
Один комментарий на «“Как закруглить края картинки в CSS”»
Обязательно воспользуюсь Вашими рекомендациями. Спасибо.