Как добавить скруглённые уголки к картинке?

Чтобы получить изображение не с прямыми, а со скруглёнными уголками, к селектору img следует добавить свойство border-radius со значением, определяющим радиус скругления. В примере 1 этот радиус задан как 10 пикселей. К каждому <img> для наглядности добавлена рамка, которая повторяет контур изображения.

Пример 1. Использование border-radius

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Скруглённые уголки</title> <style> img { border-radius: 10px; /* Радиус скругления */ border: 2px solid #EA9423; /* Параметры рамки */ } </style> </head> <body> <img src="image/thumb1.jpg" alt=""> <img src="image/thumb2.jpg" alt=""> <img src="image/thumb3.jpg" alt=""> </body> </html>

Результат данного примера показан на рис. 1.

Изображения со скруглёнными уголками