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

Чтобы получить изображение не с прямыми, а со скруглёнными уголками, к селектору 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.

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