Изображение с закруглёнными углами

Радиус скругления

Операционные системы, магазины приложений и дизайн-системы интерфейсов любят скруглённые углы, иконки iOS, карточки Material, современные компоненты Tailwind. Загрузите любое изображение: инструмент скруглит все четыре угла до заданного радиуса, сохранит файл в формате PNG с прозрачными углами и при желании применит разный радиус к каждому углу, для эффекта отрывного корешка билета или речевого пузыря.

Как закругить углы изображения

  1. 1

    Загрузить изображение

    JPG, PNG или WebP.

  2. 2

    Выберите радиус

    В пикселях или в процентах от более короткой стороны.

  3. 3

    Опционально: разные значения для каждого угла

    Скруглите только верхние углы (карточка) или асимметрично (билет).

  4. 4

    Выберите фон

    Прозрачный формат (PNG) или однотонный цвет при сохранении в формате JPG.

  5. 5

    Экспорт

    Формат PNG сохраняет округлые углы изображения; формат JPG выравнивает его по выбранному цвету.

Варианты радиуса для распространённых элементов пользовательского интерфейса

Предустановки радиуса

Форма Радиус
Ненавязчивая карточка интерфейса 4–8 пикселей
Карточка Material Design 4 пикселя (или 8 пикселей в M3)
Иконка приложения iOS 22,37 % от стороны («squircle»)
Иконка приложения macOS 18,75 % от стороны
Пузырёк истории в Instagram 12–16 пикселей
Круглый аватар 50 % от короткой стороны (полностью круглый)
Отрывной корешок билета Асимметрично, скруглите только один или два угла
Сторона с хвостиком чат-пузыря Один угол маленький, остальные крупнее

Проблема squircle

Иконки iOS не являются простыми скруглёнными прямоугольниками, они используют «суперэллипс», который математически более плавен на переходе. Настоящие squircle выходят за пределы того, что могут отрисовать CSS-свойство border-radius или простая альфа-маска; инструмент аппроксимирует их скруглённым прямоугольником высокого порядка, который при типичных размерах иконок выглядит неотличимо от оригинала.

Поведение прозрачности

  • Вывод в PNG, вариант по умолчанию: скруглённые углы становятся прозрачными пикселями. Удобно для иконок приложений, карточек интерфейса и всех случаев, когда изображение нужно наложить на разнообразный фон.
  • Вывод в JPG не может быть прозрачным. Скруглённые углы заполняются выбранным вами цветом, из-за чего фотография выглядит как в рамке.

Разный радиус для каждого угла

Вид чат-пузыря: скруглите три угла по 12 пикселей, а один оставьте на 0 пикселей (угол, где крепился бы «хвостик»). Отрывной корешок билета: два острых угла и два скруглённых. Асимметричные радиусы, быстрый способ подчеркнуть, что изображение к чему-то прикреплено.

Сглаживание (anti-aliasing)

Кривые углов отрисовываются с 4-кратным суперсэмплингом, поэтому выглядят чёткими при обычных размерах просмотра. При печати или сильном увеличении радиус остаётся заметно гладким.

Часто задаваемые вопросы

Apple использует squircle, кривизна углов которого составляет примерно 22,37 % от стороны иконки. На холсте 1024 × 1024 пикселя это соответствует эффективному радиусу углов около 229 пикселей, хотя точная математика немного отличается от обычного скруглённого прямоугольника.

Да. Радиус применяется к каждому углу независимо от соотношения сторон изображения. При экстремальных соотношениях (очень широких или очень высоких) установка радиуса в 50 % от короткой стороны даёт форму капсулы.

Нет, формат JPG не поддерживает прозрачность. Чтобы сохранить скруглённую альфу, экспортируйте файл в формат PNG; либо выберите цвет фона для JPG, углы будут заполнены этим цветом.

Да. Инструмент добавляет только альфа-маску и не изменяет размер изображения. Если вы хотите совместить скругление с изменением размера, сначала примените инструмент изменения размера.

Сопутствующие инструменты

Палитра цветов Material Design

Просмотрите палитру цветов Material Design. Копируйте любой оттенок (от 50 до A700) в форматах HEX, RGB или HSL одним нажатием.

Конструктор тир-листов

Создайте приватный тир-лист из текста и локальных изображений. Настройте уровни, распределите элементы мышью или клавиатурой и экспортируйте в JSON, PNG или SVG.

Конвертер JPG в Excel

Запустите локальное OCR для таблицы в JPG или JPEG и скачайте предполагаемые строки в XLSX либо CSV UTF-8. Файлы до 20 МБ остаются в браузере.

Генератор спрайт-листов

Объедините несколько изображений в один PNG спрайт-лист на равномерной сетке прямо в браузере. Получите PNG и готовые классы CSS со смещениями background-position.

Изображение в Excel

Распознайте таблицу в PNG, JPG или WebP локально и скачайте найденные строки в XLSX или CSV. Файлы до 20 МБ остаются в браузере.

Конвертер ARW в JPG

Конвертируйте фотографии Sony ARW RAW в JPG. Получите универсально совместимый JPEG для обмена из RAW-файла камеры без запуска Lightroom.

Инструмент доступен на других языках