Закруглить углы фото

О GeekFormat

Нажмите для загрузки изображения

JPG / PNG / WEBP

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

Радиус угла

20%

050%

Формат вывода

Загрузите изображение для показа предпросмотра

Добавляйте скруглённые углы к любому изображению онлайн. Выберите пресет или перетащите ползунок, просмотрите результат в реальном времени и экспортируйте прозрачный PNG для любого фона — обработка целиком локальная.

Что такое скругление углов изображения?

Скругление углов изображения — это технология обработки, при которой четыре прямых угла изображения заменяются плавными дугами. Инструмент рисует путь скруглённого прямоугольника через Canvas arcTo() и вызывает clip(), чтобы отсечь изображение по этой области. Необрезанная область становится прозрачными пикселями (Alpha=0) при экспорте в PNG.

**Какой визуальный эффект дают скруглённые углы?** Скруглённые углы выглядят мягче и дружелюбнее, чем прямые, снижая визуальную резкость. Их широко используют в иконках приложений, кнопках, карточках и аватарах. «Суперэллипс» (squircle) iOS доводит эту идею до ещё более плавных кривых.

**Почему многие иконки приложений требуют скруглённых углов?** Начиная с iOS, iPadOS и macOS Big Sur система автоматически применяет к иконкам скруглённую маску, и при белом фоне у исходного изображения появляется заметный белый кант. Решение — заранее экспортировать из источника скруглённый PNG, чтобы система не маскировала его повторно. Именно для этого и создан этот инструмент.

**Пиксели против процентов:** Пиксели точны, но плохо выравниваются между изображениями; проценты адаптируются к разным размерам. В дизайн-системах обычно используют проценты: например, 22,37 % для иконок iOS и 25 % для Android Adaptive Icon.

**Отличие от CSS border-radius:** CSS border-radius обрабатывает только слой отображения, поэтому экспортированное изображение остаётся с прямыми углами. Инструмент создаёт настоящий PNG с альфа-каналом, который можно использовать в любом окружении без поддержки CSS (PowerPoint, видео, печать).

Варианты использования

Создавайте аватары для мессенджеров и соцсетей (Telegram, VK, X, Instagram, Facebook) одним кликом — идеальный круг
Быстро добавляйте круглые углы к иконкам приложений (iOS 22–25 %, Android Adaptive Icon 25 %)
Смягчайте углы главных изображений товаров в e-commerce, повышая кликабельность и конверсию
Обрабатывайте локально материалы с круглыми углами для слайдов PowerPoint, видеомонтажа и печати
Стандартизируйте иконки и элементы дизайна под единый размер углов в дизайн-системе (по одному за раз)

Как использовать

Кликните по области загрузки, чтобы выбрать изображение, или перетащите файл JPG, PNG или WEBP прямо в неё
Выберите пресет Малый (10 %), Средний (25 %) или Большой (50 %) для мгновенного скругления, или перетащите ползунок для своего значения (переключайтесь между процентами и пикселями кликом)
Выберите формат вывода: PNG (прозрачный фон), WEBP (меньший размер) или JPG (белый фон, без прозрачности)
Просмотрите результат справа и нажмите Скачать — файл сохранится с автоматическим суффиксом -rounded

Функции

Две единицы: свободное переключение между пикселями (0–500 px) и процентами (0–50 %) для радиуса угла
3 пресета: Малый (10 %), Средний (25 %), Большой (50 %) одним кликом и пользовательский ползунок
3 формата вывода: PNG (с прозрачностью), WEBP (меньший размер) или JPG (белый фон)
Просмотр в реальном времени: регулируйте ползунок и мгновенно видьте эффект, шахматный фон наглядно показывает прозрачность
Загрузка перетаскиванием: кликните или перетащите JPG, PNG или WEBP прямо в область загрузки
Локальная обработка: всё работает в Canvas браузера, изображение не покидает ваше устройство

Best Practices

Выбирайте PNG вместо JPG, когда нужна прозрачность

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

Выбирайте WEBP для прозрачных ассетов, которые должны быть компактными

WEBP поддерживает прозрачность и на 25–35 % меньше PNG, отлично подходит для веб-ассетов. Учтите, что некоторые старые программы для дизайна не распознают WEBP, поэтому при межпрограммной работе отдавайте предпочтение PNG.

Выбор радиуса угла для иконки приложения

iOS автоматически добавляет к иконкам приложений углы около 22,37 %, но белый фон на исходном изображении даёт заметный белый кант. Решение — заранее сгенерировать круглый PNG этим инструментом (рекомендуется 22–25 %). Для Android Adaptive Icon безопасный радиус — 25 %.

Используйте радиус 50 % для аватара в виде идеального круга

Большинство соцсетей (Telegram, VK, X, Instagram и др.) показывают аватары как идеальный круг. Пресет 50 % создаст прозрачный круглый PNG одной кнопкой, который подойдёт и к светлой, и к тёмной теме.

Руководство по иконкам iOS

Не надевайте CSS border-radius поверх экспортированного скруглённого изображения

Если вы уже экспортировали скруглённый PNG из этого инструмента, не помещайте его в контейнер с CSS border-radius + overflow:hidden, иначе края будут обработаны дважды и станут размытыми. Выводите скруглённое изображение обычным тегом img.

Нужна более сложная форма (разный радиус углов, скругление только сверху)?

Инструмент поддерживает только одинаковые углы со всех четырёх сторон. Для скругления только сверху, только снизу или разного радиуса по углам (TabBar, заставки) используйте редактор изображений или дизайн-инструмент вроде Figma.

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

Как добавить круглые углы к изображению?

После загрузки кликните по пресету Малый, Средний или Большой для быстрого скругления или перетащите ползунок, чтобы задать своё значение в пикселях (0–500 px) или процентах (0–50 %). Справа результат отображается в реальном времени. Когда всё устраивает, нажмите Скачать — файл сохранится с автоматическим суффиксом -rounded.

Что лучше использовать — пиксели или проценты?

Пиксели дают точный контроль и подходят для ассетов фиксированного размера. Проценты масштабируются по короткой стороне изображения и адаптируются к разным размерам. Инструмент поддерживает переключение в один клик, а 50 % всегда дают идеальный круг — отлично для аватаров.

Что происходит с областью скругления?

При выборе PNG или WEBP область скругления полностью прозрачна (Alpha=0) и естественно сливается с любым фоном. При выборе JPG она заливается белым (в интерфейсе появляется жёлтое предупреждение); используйте JPG только когда прозрачность не нужна.

Какие форматы изображений поддерживаются?

Входные форматы: JPG, PNG, WEBP. Выходные: PNG (прозрачный), WEBP (меньший размер), JPG (белый фон). Скачиваемый файл автоматически получает суффикс -rounded, чтобы не путать его с оригиналом.

Есть ли ограничения по радиусу угла?

Процентный режим: 0–50 % (50 % даёт идеальный круг), пиксельный режим: 0–500 px. Чем больше значение, тем круглее угол. Инструмент использует Canvas arcTo + clip для стандартных круглых углов, без суперэллипсов Squircle.

Можно ли сделать аватар или иконку приложения?

Да. Для аватара в виде идеального круга используйте пресет 50 %. Для иконок iOS рекомендуется 22–25 % (пресет 25 % совпадёт в один клик). Для Android Adaptive Icon безопасный радиус — 25 %. Прозрачный PNG подойдёт к любой теме.

Скругление делает изображение размытым?

Нет. Инструмент работает в исходном разрешении через отсечение по пути в Canvas, без передискретизации и сжатия. Качество вывода полностью совпадает с оригиналом, отсекаются только углы, а края остаются чёткими.

Изображение отправляется на сервер?

Нет. Всё происходит локально в браузере через Canvas API. Изображение не передаётся ни на какой сервер и удаляется при закрытии страницы. Личные фото, сканы документов и конфиденциальные материалы можно обрабатывать без опасений.

Почему эффект скругления не виден?

Проверьте: ① значение радиуса больше 0 (ползунок не в крайнем левом положении); ② изображение успешно загружено (формат JPG, PNG или WEBP); ③ браузер поддерживает HTML5 Canvas (все современные поддерживают). Если проблема сохраняется, обновите страницу и загрузите изображение заново.

Чем это отличается от CSS border-radius?

CSS border-radius работает только в слое отображения браузера и не впекает углы в файл изображения. Этот инструмент экспортирует настоящий PNG с альфа-каналом, поэтому скруглённое изображение работает в PowerPoint, видеоредакторах, печати и везде, где CSS не поддерживается.

Глоссарий

Радиус скругления (Border Radius): Радиус дуги скруглённого угла. Чем больше значение, тем круглее угол; максимум равен половине короткой стороны изображения, что даёт идеальный круг. Инструмент поддерживает пиксели (0–500 px) и проценты (0–50 %).
Альфа-канал: Канал прозрачности, встроенный в PNG и WEBP, со значениями 0–255 на пиксель. Инструмент выставляет пиксели в скруглённых углах на Alpha=0, получая полностью прозрачный вывод, который сливается с любым фоном.
Squircle (суперэллипс): Форма скругления, появившаяся в iOS 7+, более плавная, чем стандартный угол, описывается уравнением x⁴+y⁴=r⁴. Инструмент выдаёт стандартные дуги; для Squircle используйте Figma или Sketch.
Adaptive Icon: Формат иконки Android 8.0+ с разделёнными слоями переднего плана и фона. Безопасный радиус — 25 %, лаунчер OEM применяет собственную маску (круг, squircle и т. д.).
Canvas arcTo: Метод Canvas 2D API для рисования дуги. Инструмент использует arcTo + clip, чтобы построить путь скруглённого прямоугольника, отсечь изображение по нему и сделать внешнюю область прозрачной при экспорте.

Справочник радиусов углов по платформам

Платформа / элемент	Базовый размер	Рекомендуемый радиус	Примерно (px)
Иконка приложения iOS / iPadOS	`1024 × 1024`	Около 22,37 %	≈ 229 px
Android Adaptive Icon	`108 × 108`	Около 25 %	≈ 27 px
Иконка приложения macOS Sonoma	`1024 × 1024`	Суперэллипс Squircle	Нет фикс. px
Карточка Windows 11	`—`	Около 8 px	8 px
Material Design 3 Large	`—`	Около 28 px	28 px
Аватар Telegram / VK	`640 × 640`	50 % (идеальный круг)	320 px
Аватар Twitter / Instagram	`400 × 400`	50 % (идеальный круг)	200 px
Главное фото в e-commerce	`800 × 800`	16–24 px рекомендуется	16-24 px

Authoritative References

ReferenceMDN - border-radius
ReferenceApple HIG - Руководство по иконкам приложений
ReferenceWikipedia - Суперэллипс
ReferenceMDN - CanvasRenderingContext2D.arcTo()