Щоб отримати зображення не з прямими, а із заокругленими куточками, до селектора 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. Зображення із заокругленими куточками