Як зробити картинку у вигляді кола c допомогою css

Теги: css, img, border-radius

У цій статті ми розповімо про те, яким чином кросбраузерності закруглити кути у картинки. Аж до того, щоб воно було поміщено в коло.

Зараз дуже модним стало в дизайні сайтів вставляти не звичайні прямокутні зображення, а закруглити їх кути, роблячи тим самим їх більш симпатичними.

Якщо переносити таку задумку з макет-дизайну на веб-сторінку, то тут використовується властивість border-radius стосовно до самого зображення - тег img.

Зліва - вихідне зображення, праворуч - з border-radius. 40px;

Як ви вже зрозуміли, як значення наше властивість отримує значення заокруглення, найчастіше воно чисельну. І ступінь заокруглення залежить від розмірів зображення.

Припустимо ось як задумав дизайнер і намалював такий макет (це всього лише зображення):

Ми отримали цей самий макет і фото Світлани в хорошій якості:

Приступимо до процесу верстки. Спочатку задамо розмітку майбутньої сторінці:

А тепер додаємо стилі:

Варто звернути увагу на 14 сходинку, в ній ми задаємо border-radius рівний 100%. що повністю заокруглення кути і будь-квадратне зображення перетворюється в кругле.

Результат приклади ви можете подивитися на демо-сторінці:

Або завантажити всі файли прикладу:

Саме чудове, що даний метод кроссбраузерен і працює у всіх браузерах останніх версій, в тому числі і в IE 9 +.