Для заокруглення куточків елементів призначено властивість border-radius, значенням якого є радіус заокруглення. Якщо взяти квадратне зображення та додати до нього властивість border-radius зі значенням 50%, то ми отримаємо вже не квадратне, а кругле зображення.
Плюсом використання border-radius є те, що ми можемо додавати до елемента рамку, тінь і вони будуть повторювати контур. У прикладі 1 показано створення круглих зображень, для чого вводиться клас round, з тінню та рамкою.
Приклад 1. Круглі зображення
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Круглі зображення</title> <style> .round { border-radius: 50%; /* Радіус заокруглення */
border: 3px solid green; /* Параметри рамки */
box-shadow: 0 0 7px #666; /* Параметри тіні */
}
</style>
</head>
<body> <p><img src="image/thumb1.jpg" alt="" class="round"> <img src="image/thumb2.jpg" alt="" class="round"> <img src="image/thumb3.jpg" alt="" class="round"></p>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Рис . 1. Круглі зображення
Щоб вийшло саме кругле зображення, воно спочатку має бути квадратним. В іншому випадку з'явиться овальне зображення.