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

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

Операционные системы, магазины приложений и дизайн-системы интерфейсов любят скруглённые углы, иконки 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, углы будут заполнены этим цветом.

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

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

Сжать GIF

Уменьшайте анимированные GIF прямо в браузере: снижайте размеры, оставляйте меньше кадров и настраивайте качество кодирования. Проверьте петлю перед скачиванием.

Обрезать GIF

Обрежьте статический или анимированный GIF по точным координатам и скачайте заново закодированный файл GIF.

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

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

Текст в рукописный почерк

Введите или вставьте текст, выберите один из пяти рукописных шрифтов, чистый лист, линейку или клетку и цвет чернил, затем скачайте страницу в PNG. Всё рисуется прямо в браузере.

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

Локально распознайте текст на изображении PNG, JPG или WebP с OCR на 18 языках. Проверьте его в браузере и скачайте редактируемый DOCX или TXT.

Генератор миллиметровой бумаги

Создавайте бумагу в клетку для печати онлайн: выберите сетку или точки, задайте шаг в мм, укажите A4 или Letter и свой цвет линий, затем распечатайте или скачайте чёткий SVG.

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