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

Чем это скругление отличается: у каждого угла может быть свой радиус, радиус можно задать в пикселях или в процентах от короткой стороны, а сам угол может быть обычной дугой скругления, гладким сквирклом, прямой фаской или внутренней выемкой. Инструмент также печатает соответствующее правило CSS border-radius, чтобы ту же форму можно было воспроизвести в коде, а не файлом.

Зачем скруглять углы изображения?

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

1. Загрузите изображение. Перетащите файл в область сброса или нажмите Выбрать изображение. JPG, PNG, WebP, GIF, BMP, AVIF и SVG работают, если браузер умеет их декодировать.
2. Задайте радиус. Перетащите один из круглых маркеров угла на предпросмотре, сдвиньте ползунок Радиус угла или введите точное число и переключите единицу между px и %.
3. Выберите стиль угла. Скругление, Сквиркл, Фаска или Выемка. Отключите Связать все углы, чтобы задать каждому углу своё значение — на экране они расположены точно как углы, которыми управляют.
4. При желании добавьте отступ, фон или обводку. Отступ расширяет холст вокруг картинки, фон его заливает, а кольцо обводки следует скруглённому контуру, а не старому прямоугольнику.
5. Скачайте. Оставьте PNG для просвечивающих углов, затем нажмите Скачать изображение. Панель показывает размеры экспорта и размер файла, а блок CSS — эквивалентное правило таблицы стилей.

Радиус в пикселях или в процентах

Радиус в пикселях абсолютный: 32 px — это 32 px, будь изображение шириной 400 или 4000 пикселей, поэтому одно и то же значение выглядит драматично на маленькой миниатюре и почти незаметно на большом фото. Радиус в процентах считается по короткой стороне изображения, поэтому масштабируется вместе с картинкой и выглядит одинаково в любом экспорте. 50% — максимальное полезное значение: на квадрате получается круг, на прямоугольнике — капсула.

Четыре стиля углов

• Скругление — четверть круга, та же геометрия, которую браузер рисует для border-radius. Предсказуемо, и это единственный стиль, который однозначно соответствует CSS.
• Сквиркл — угол в духе суперэллипса. Кривая начинается дальше вдоль каждого края и переходит в прямую сторону без резкой смены кривизны, как у круга, поэтому гайдлайны иконок iOS и Android используют именно эту форму.
• Фаска — угол срезан прямой диагональю. Острее и техничнее кривой и остаётся чётким на малых размерах.
• Выемка — дуга изгибается внутрь и вырезает вогнутый «укус». Две выемки на противоположных сторонах сразу читаются как билет или бирка.

Выбор формата вывода

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

Ключевые возможности

• Конфиденциальность по замыслу: файл читается через FileReader API браузера и рисуется на холсте локально. Он никогда не загружается.
• Редактирование перетаскиванием угла: потяните маркер по диагонали на предпросмотре и смотрите, как радиус следует за пальцем или курсором.
• Управление каждым углом: скруглите только два верхних угла или сделайте выемку с одной стороны, оставив остальные квадратными.
• Фоны предпросмотра: переключайтесь между шахматной сеткой прозрачности, белым, тёмным и цветовым градиентом, чтобы проверить край альфы перед скачиванием.
• Отступ, заливка фона и обводка, которые все следуют одному и тому же скруглённому контуру.
• Масштаб вывода: экспорт в исходном разрешении или уменьшение до 75%, 50% или 25% за один проход.
• Копируемый CSS: сгенерированное правило border-radius воспроизводит ту же форму в таблице стилей, когда файл — не лучший ответ.
• Сглаженные края: угол рисуется как контур отсечения, поэтому кривая остаётся гладкой, а не ступенчатой.

Файл изображения или CSS?

Если скруглённая картинка пойдёт в презентацию, PDF, подпись письма, карточку маркетплейса или любой инструмент, который не выполнит вашу таблицу стилей, нужен настоящий файл с настоящей прозрачностью — экспортируйте PNG. Если она пойдёт на веб-страницу, которой вы управляете, правило CSS легче, остаётся чётким при любом размере и его проще потом изменить; скопируйте фрагмент. Это не взаимоисключающие варианты: многие команды отдают PNG для внешнего использования и CSS для сайта.

Устранение неполадок

• Угол выглядит зубчатым: исходник, скорее всего, уже маленький. Скругляйте в наибольшем доступном разрешении, затем уменьшайте, а не скругляйте уже увеличенное изображение.
• На тёмном фоне появляется тонкий светлый ореол: в изображение была запечена белая подложка. Добавьте один-два пикселя отступа подходящего цвета или чуть увеличьте радиус, чтобы ореол срезался.
• Скачивание открывается как белый квадрат: формат JPG или фон не задан как «Прозрачный». Переключите формат вывода на PNG.
• Очень большое фото тормозит: холст перерисовывает полноразмерное изображение при каждом движении ползунка. Отпустите ползунок и дайте браузеру мгновение или уменьшите масштаб вывода.
• Анимированный GIF теряет анимацию: canvas экспортирует один кадр. Скругляется и сохраняется только первый кадр.

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

Загружается ли моё изображение на сервер?

Нет. Файл читает ваш браузер через FileReader API и рисует его на HTML canvas на вашем устройстве. На miniwebtool ничего не отправляется, поэтому личные скриншоты, работы клиентов и семейные фото не покидают компьютер. Самой странице по-прежнему нужно интернет-соединение, чтобы загрузиться.

Почему скруглённые углы выглядят белыми или чёрными, а не прозрачными?

Прозрачность умеют хранить только PNG и WebP. Если экспортировать JPG, у формата нет альфа-канала, поэтому вырезанные углы заливаются цветом фона. Выберите PNG в списке «Формат» и задайте фон «Прозрачный». Если углы всё ещё выглядят неправильно, проверьте, что приложение или сайт, куда вы вставляете файл, поддерживают альфу: некоторые редакторы сплющивают прозрачность PNG на белый фон.

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

Переключите единицу радиуса на проценты и задайте радиус 50%. На квадратном изображении получится идеальный круг. На прямоугольнике получится капсула или стадион, потому что процентный радиус считается по короткой стороне. Воспользуйтесь пресетом «Круг», чтобы обрезать до квадрата и скруглить в один щелчок.

Чем отличаются углы скругление, сквиркл, фаска и выемка?

Скругление — обычная четверть круга, та же форма, которую рисует CSS border-radius. Сквиркл растягивает кривую дальше вдоль каждого края, так что стык получается гладким и непрерывным — такой вид у иконок приложений iOS и Android. Фаска срезает угол прямой диагональю. Выемка изгибается внутрь, а не наружу, и вырезает вогнутый «укус» из каждого угла — это подходит для билетов, купонов и значков.

Совпадает ли радиус в пикселях с CSS border-radius на моём сайте?

Радиус применяется в пикселях самого изображения, поэтому он совпадает с CSS только когда картинка показана в натуральном размере. Экспорт шириной 1200 пикселей в колонке шириной 600 пикселей уменьшается вдвое, поэтому радиус 48 пикселей выглядит как 24 пикселя на экране. Используйте проценты для результата, независимого от размера, или скопируйте фрагмент CSS, который инструмент уже приводит к масштабированному эквиваленту.

Можно ли сохранить качество изображения и исходное разрешение?

Да. Экспорт сохраняет исходные пиксельные размеры, если вы не меняете масштаб вывода и не добавляете отступ, а PNG без потерь, поэтому ничего не пережимается заново. Меняются только пиксели углов — с непрозрачных на прозрачные. WebP и JPG с потерями, поэтому используйте их, когда размер файла важнее точной копии исходных пикселей.