مولد شعاع گوشهٔ کادر CSS

هر گوشه، دقیقاً به شکلی که می‌خواهید

ویژگی CSS border-radius در نگاه اول ساده به نظر می‌رسد، اما وقتی بخواهید شکلی ارگانیک مانند «بلاب» یا طرح نامتقارن برگ/گلبرگ بسازید، متوجه می‌شوید که هر گوشه می‌تواند دو مقدار جداگانه داشته باشد (شعاع افقی و عمودی) و سینتکس کوتاه‌شده خیلی زود ناخوانا می‌شود. این مولد هم حالت سادهٔ سریع را در اختیار شما می‌گذارد (یک لغزنده هر چهار گوشه را با هم و برحسب px یا % گرد می‌کند) و هم حالت پیشرفتهٔ کامل را که در آن هر گوشه شعاع افقی و عمودی مخصوص خود را دارد؛ پیش‌نمایش زنده نیز به شما نشان می‌دهد هنگام کشیدن لغزنده‌ها دقیقاً چه شکلی می‌سازید.

نحوهٔ استفاده

• اگر فقط گوشه‌های معمولیِ گرد می‌خواهید، از حالت Simple شروع کنید — یک لغزنده هر چهار گوشه را کنترل می‌کند.
• برای کنترل کامل و مستقل شعاع افقی و عمودی هر گوشه، به حالت Advanced بروید — به این روش می‌توانید بیضی‌ها، برگ‌ها و حباب‌ها را بسازید.
• پیش‌تنظیم‌های تک‌کلیکی را امتحان کنید: Circle، Squircle (مربعی نرم‌تر و گردتر که در آیکون‌های مدرن اپلیکیشن‌ها محبوب است)، Leaf (دو گوشهٔ مقابل کاملاً گرد و دو گوشهٔ دیگر کاملاً مربعی) و Random Blob برای ایجاد شکلی ارگانیک که بتوانید بیشتر ویرایشش کنید.
• CSS نهایی یا کلاس مقدار دلخواه Tailwind را مستقیماً در پروژهٔ خود جای‌گذاری کنید.

آشنایی با شکل کوتاه border-radius

ویژگی CSS border-radius حداکثر هشت مقدار را می‌پذیرد که با یک اسلش از هم جدا می‌شوند: چهار شعاع افقی (بالا-چپ، بالا-راست، پایین-راست، پایین-چپ) پیش از اسلش و چهار شعاع عمودی پس از آن قرار می‌گیرند. وقتی شعاع افقی و عمودی همهٔ گوشه‌ها برابر باشند، مرورگرها اجازه می‌دهند اسلش را حذف کنید و فقط چهار مقدار ساده (یا کمتر) بنویسید؛ حالت سادهٔ این ابزار نیز دقیقاً همین خروجی را تولید می‌کند تا وقتی به سینتکس کامل بیضوی نیاز ندارید، CSS شما تمیز بماند.

پرسش‌های متداول

چطور با border-radius یک دایرهٔ کامل بسازم؟

در یک عنصر مربعی، شعاع را روی 50٪ تنظیم کنید (یا از پیش‌تنظیم Circle استفاده کنید که برای تضمین گردشدگی کامل، صرف‌نظر از نسبت ابعاد عنصر، مقداری به‌مراتب بیشتر از 50٪ به کار می‌برد) — برای ایجاد یک دایرهٔ واقعی، عرض و ارتفاع باید برابر باشند.

«اسکویرکل» چیست؟

اسکویرکل شکلی میان مربع و دایره است؛ گوشه‌هایی نرم‌تر از یک مستطیل معمولیِ گرد دارد، اما کاملاً گرد نیست. این شکل برای آیکون‌ها و کارت‌های مدرن اپلیکیشن محبوب است و الگوی آمادهٔ اسکویرکل نقطهٔ شروع مناسبی برای تنظیمات دقیق‌تر در اختیار شما می‌گذارد.

آیا می‌توانم تغییرات border-radius را متحرک کنم؟

Yes — border-radius is animatable with a plain CSS transition (e.g. transition: border-radius 0.3s ease), which is a common trick for hover effects that morph a card's shape.

آیا border-radius در همهٔ مرورگرها به یک شکل کار می‌کند؟

بله، این قابلیت سال‌هاست با نحوی یکسان در همهٔ مرورگرهای مدرن پشتیبانی می‌شود؛ از جمله نحو بیضویِ دارای دو مقدار برای هر گوشه که حالت Advanced این ابزار تولید می‌کند.

چرا border-radius در یک عنصر کوچک بریده‌شده به نظر می‌رسد؟

اگر مجموع شعاع گوشه‌ها از عرض یا ارتفاع عنصر بیشتر شود، مرورگرها به‌طور خودکار همهٔ شعاع‌ها را به‌صورت متناسب کوچک می‌کنند تا همچنان در عنصر جا بگیرند — این رفتار استاندارد CSS است، نه یک باگ.