Перед початком
Визначте місце застосування. Для сайту залиште прямокутний оригінал; готовому файлу з прозорими кутами потрібен альфа-канал.
Текстове пояснення схеми
CSS для сторінки → Маска для файлу → Альфа для кутів. Для зображення 800 × 600 радіус 24 CSS-пікселі задається одним правилом. На телефоні це залишаться 24 CSS-пікселі, а не автоматично зменшена частка оригінального файлу.
Як зробити
- Задайте border-radius зображенню або контейнеру. Для обрізання контейнером використайте overflow: hidden і перевірте, що він не приховує керування чи рамку фокуса.
- У редакторі використайте векторну маску із заокругленим прямокутником. Не стирайте кути гумкою: пізніше змінити радіус буде складніше.
- Перевірте радіус на вузькому екрані. Для прозорих кутів експортуйте PNG або відповідний WebP, а не JPEG.
.photo { max-width: 100%; height: auto; border-radius: 24px; }Розгляньмо приклад
Для зображення 800 × 600 радіус 24 CSS-пікселі задається одним правилом. На телефоні це залишаться 24 CSS-пікселі, а не автоматично зменшена частка оригінального файлу.
Перевірте результат
У кутах видно справжнє тло сторінки, а не білі трикутники. Вкладені картка й зображення не утворюють подвійного неузгодженого заокруглення.
Де легко помилитися
Білі кути в JPEG виглядають правильно лише на білому. Кольорове тло виявить непотрібну рамку.
Джерела й продовження
- MDN — border-radius
- Делаем закругленные углы картинок в Фотошопе — 2010-02-06 (RU)
Схема й приклади: редакція Web Article. Схема пояснює принцип і не є знімком інтерфейсу або результатом випробування програми.