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

21

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

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

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

Источник