Будь-які растрові зображення самі по собі прямокутні, тому для створення складної форми в картинках застосовують прозорість або фон, що співпадає з фоном веб-сторінки. Дійсно круглі зображення можна зробити за допомогою стильової властивості border-radius. До таких зображень застосовується рамка через border і вона теж буде круглою, а не квадратної. Якщо круглу картинку вставити в . то областю посилання буде коло.
Щоб зробити довільне зображення круглим спочатку слід перетворити його в квадрат, а потім в стилях додати властивість border-radius зі значенням 50% (приклад 1). Краще ставити саме в процентах, так ми не прив'язуємося до розмірів картинок.
Приклад 1. Круглі зображення
Результат даного прикладу показаний на рис. 1.
Мал. 1. Круглі зображення
border-radius застосовується до будь-яких інших елементів, тому ми можемо створити порожній квадратний
Мал. 2. Фотографія акули
Тепер встановлюємо цю фотографію як фон для класу round. задаємо розміри елемента і налаштовуємо масштаб зображення (приклад 2).
Приклад 2. Круглий елемент
Результат даного прикладу показаний на рис. 3. Фон за замовчуванням встановлюється в лівому верхньому кутку, так що зрушує його на 70 пікселів вліво, щоб акула виявилася в центрі кола.
Мал. 3. Кругле зображення