Останнім часом в веб-дизайні стає дуже популярним використання круглих зображень. Приклад можна побачити у мене на блозі, мініатюри до записів виводяться максимально округлені, тобто абсолютно круглими. Існують різні способи реалізації виведення круглих картинок. Перевірений роками, що працює у всіх браузерах без винятку, це попередня підготовка зображень в графічному редакторі, коли зі стандартної картинки виділяється область кола і обрізається по контуру.
Тепер, це вже минуле століття, спосіб звичайно надійний, але не практичний. За допомогою властивостей CSS можна домогтися тих же самих результатів, при цьому позбавивши себе від необхідності готувати кожне зображення.

Мене часто запитують, як за допомогою CSS зробити зображення абсолютно круглими?
Уявляю на ваше огляд самий простий і швидкий спосіб. Всього кілька рядків коду і ваші картинки стануть абсолютно круглими:

img {width: 200px; height: 200px; border -radius: 50%; }

img {width: 200px; height: 200px; border-radius: 50%; }

За умови що всі сторони зображення рівні, тобто визначені рівні величини значень для ширини width: і висоти height :, при цьому оригінал картинки може бути будь-хто.
Для наочності, щоб візуально був зрозумілий весь процес, за допомогою псевдокласу hover: визначив повернення картинки в стан з мінімальним скруглением кутів, при наведенні на зображення.

У прикладі використовував картинку розміром 367 × 268, для виведення на сторінці визначив розмір 200 × 200 і використовував процентне значення для border-radius :. Можна звичайно прописати значення і в px, просто ділите картинку навпіл, прописуєте в border-radius: 100px і отримуєте таку ж абсолютно круглу картинку.

Використовувати даний метод можна де завгодно, мініатюри записів, аватари користувачів в коментарях і т.д., головне не перестаратися і вчасно притримати свою невгамовну фантазію)))
У IE8 підтримки властивості border-radius немає, так що користувачі, які продовжують наполегливо сидіти на цьому браузері, побачать ідеально квадратні картинки (((.

На маркетплейсе TemplateMonster вже представлені тисячі готових рішень. А зовсім недавно вони поповнилися новою категорією шаблонів, точніше. Всі вони наповнені просто величезною кількістю відмінних параметрів. А це означає, що ви отримаєте від них просто максимальну віддачу. Також не забувайте, що тексти для всіх шаблонів, які представлені на сайті, були написані вручну.

З повагою Андрій

Буду вдячний, якщо поділитеся посиланням на запис в своїх соц-мережах: