Как закруглить углы изображения и фото с помощью CSS (без редактирования самой картинки)

Вводная (описание проблемы): в последние неск. лет появилась какая-то мода на скругленные углы у картинок (см. превью слева), а по умолчанию все эти изображения (будь то фото или скрины) делаются с прямым углом... Незадача?!🤨

Однако, благодаря CSS совсем не обязательно вручную редактировать картинки (выкладываемые на сайте/форуме или еще где) в графических редакторах. Можно немного отредактировать стили (CSS) и прямой угол на всех изображениях станет полукругом (с радиусом)! Т.е. браузер отобразит картинку/фото так, как будто у нее закругленные углы, а не прямые (а само изображение будет храниться неизменнным).

Ниже покажу неск. примеров, из которых будет понятно, как это сделать... 👌

 

Примечание! Закругленные углы поддерживают только современные браузеры: FireFox, Chrome, Яндекс-Браузер, и др. (не старше 2016г. выпуска).

 

*

Примеры с закруглением углов у картинок

✏️ Пример 1

Итак...

Возьмем для примера самую обычную картинку в формате png (см. ниже). Обратите внимание, что углы у нее прямые!

Теперь, чтобы скруглить у нее углы нам (по стандарту CSS3) необходимо добавить стиль border-radius, например так:

border-radius: 20px;

(20px - здесь величина радиуса. Можно поставить свое значение)

Т.е. код картинки будет примерно такой (разумеется, вам нужно будет подставить в код ссылку на свою картинку):

<img style="border-radius: 20px;" src="https://ocomp.info/Kartinka-dlya-primera.png"/>

 

 

*

✏️ Пример 2

Если есть желание добавить тени к картинке — то CSS немного изменится, необходимо будет добавить еще одну строку (box-shadow: 0 0 20px #333;), я ее выделил синим:

border-radius: 20px;
box-shadow: 0 0 20px #333;

(кстати, #333 — это код цвета, его можно менять).

 

Вот как код картинки изменится:

<img style="border-radius: 20px; box-shadow: 0 0 20px #333;" src="https://ocomp.info/wp-content/uploads/2024/04/Kartinka-dlya-primera.png"/>

 

Кстати, коды веб-цветов вы можете найти в одной моей 📌предыдущей заметке, рекомендую!

Таблицы с кодами HTML цветов: зеленый, красный, синий, пурпурный, неоновый и др. Неск. табличек в помощь вебмастеру, администратору

 

 

*

✏️ Пример 3

Также довольно часто используют обводку картинок линией совместно с закруглением углов (так выглядеть изображение может на порядок лучше, особенно в тех случаях, когда нужно отделить ее от стороннего контента).

Дописать в код нужно стиль border, например так:

border-radius: 20px;
border: 5px #00FF00 solid;

(примечание: вместо 5px - можно задать свою толщину обводки. #00FF00 — это код цвета)

 

Вот как код картинки будет выглядеть:

<img style="border-radius: 20px; border: 5px #00FF00 solid;" src="https://ocomp.info/wp-content/uploads/2024/04/Kartinka-dlya-primera.png"/>

 

 

*

✏️ Пример 4

Еще один итоговый пример ниже, как можно комбинировать всё вышесказанное...

Применим сразу и радиус, и обводку, и тени:

border-radius: 50%;
border: 5px #00FF00 solid;
box-shadow: 0 0 20px #333;

(примечание: кстати, border-radius можно задавать не только в пикселях, но и в процентах!)

 

Вот как код картинки будет выглядеть:

<img style="border-radius: 50%; border: 5px #00FF00 solid; box-shadow: 0 0 20px #333;" src="https://ocomp.info/wp-content/uploads/2024/04/Kartinka-dlya-primera.png"/>

 

 

***

📌 Примечание!

В примерах выше мы редактировали код у каждой картинке по отдельности. Если вам нужно изменить отображение вообще всех изображений на странице (сайте) — тогда в файле style.css вашей темы необходимо прописать что-то вроде этого:

img { border-radius: 50%;
border: 5px #00FF00 solid;
box-shadow: 0 0 20px #333;
}

 

*

Иные рекомендации и способы — приветствуются в комментариях ниже.

За сим откланяюсь, удачи!

👋