Перед началом
Определите место применения. Для сайта сохраните прямоугольный оригинал. Для готового изображения с прозрачными краями понадобится формат с альфа-каналом.
Текстовое объяснение схемы
CSS для страницы → Маска для файла → Альфа для углов. Для картинки 800 × 600 радиус 24 CSS-пикселя задаётся одной строкой. На мобильном устройстве он останется 24 CSS-пикселя, а не автоматически уменьшится вместе с исходными пикселями файла.
Как сделать
- В 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. Схема объясняет принцип и не является снимком интерфейса или результатом испытания программы.