تصاویر مستطیلی استاندارد (JPG، PNG، WebP) پیکسل‌ها را در یک شبکه دکارتی سفت ذخیره می‌کنند. توسعه‌دهندگان وب می‌توانند با ویژگی CSS border-radius گردی بصری روی صفحه وب اعمال کنند، اما سبک‌های CSS خود فایل تصویر را تغییر نمی‌دهند — یعنی دارایی‌های صادرشده که در خبرنامه ایمیل، اسناد Notion، بوردهای Figma، اسلاید ارائه یا سند PDF چسبانده می‌شوند دوباره گوشه تیز ۹۰ درجه پیدا می‌کنند.
ابزار گرد کردن گوشه تصویر ما منحنی‌های درجه دوم نرم و ضدعرج را برای همیشه مستقیم در کانال آلفای تصویر می‌پزد و از مسیرهای برش شتاب‌گرفته سخت‌افزاری CanvasRenderingContext2D.arcTo() استفاده می‌کند:
| تنظیم شعاع گوشه | هندسه مؤثر | بهترین کاربرد | قالب صادرات پیشنهادی |
|---|---|---|---|
| شعاع ۸٪ – ۱۶٪ | نرم شدن ظریف کارت UI | اسکرین‌شات فروشگاه برنامه، تصویر وبلاگ SaaS، جاسازی Notion | PNGیاWebP (شفاف) |
| شعاع ۲۴٪ – ۳۵٪ | ظاهر Squircle / آیکون برنامه مدرن | نشان سبک iOS، تصویر کوچک محصول، کارت اجتماعی | PNG (RGBA سی‌ودوبیتی) |
| شعاع ۱۰۰٪ (نیم‌بعد ۵۰٪) | دایره کامل یا کپسول قرص | آواتار پروفایل، آیکون Discord/Slack، امضای ایمیل | PNG (شفاف) |
چهار گوشه نامتقارن (فقط TL/TR) |
زبانه یا سربرگ مودال با گردی بالا | بنر قهرمان ایمیل، سربرگ کارت، موکاپ UI | PNGیاJPG (با پرکننده مات) |
اگر پیش از گرد کردن آواتار به دایره کامل باید پس‌زمینه اضافه را ببرید، ابتدا سوژه را با ابزار برش تصویر در مربع 1:1 قاب کنید.