ساخت Border Radius آنلاین

ساخت آنلاین border-radius برای گرد کردن گوشه‌ها در CSS؛ با کنترل جداگانه‌ی هر گوشه، شکل‌های آماده و خروجی CSS و Tailwind.

ابزارهای توسعه‌دهنده رایگان

شعاع: 24px

واحد

CSS

Tailwind (مقدار دلخواه)

دربارهٔ این ابزار

گرد کردن گوشه‌ها در CSS با پیش‌نمایش زنده

ویژگی border-radius یکی از پرکاربردترین ویژگی‌های CSS برای ساخت دکمه، کارت، آواتار و شکل‌های مدرن است. گرد کردن ساده‌ی هر چهار گوشه آسان است، اما وقتی می‌خواهید هر گوشه را جداگانه تنظیم کنید یا شکل‌های ارگانیک مثل بلاب بسازید، نوشتن دستی هشت مقدار با اسلش به‌سرعت گیج‌کننده می‌شود. با ابزار ساخت Border Radius تولتولیا کافی است لغزنده‌ها را بکشید و نتیجه را زنده ببینید؛ کد CSS یا کلاس Tailwind هم آماده‌ی کپی است.

ویژگی‌های ابزار

حالت ساده: یک لغزنده برای گرد کردن هم‌زمان هر چهار گوشه، با واحد پیکسل یا درصد.
حالت پیشرفته: شعاع افقی و عمودی جداگانه برای هر گوشه، برای ساخت گوشه‌های بیضوی و شکل‌های نامتقارن.
شکل‌های آماده: دایره، اسکویرکل، برگ و بلاب تصادفی.
خروجی CSS و Tailwind با کپی تک‌کلیکی.
کد تمیز: وقتی به سینتکس بیضوی نیاز نیست، کوتاه‌ترین شکل کد تولید می‌شود.
رایگان و بدون ثبت‌نام.

آموزش استفاده

برای گوشه‌های گرد معمولی، حالت «ساده» را انتخاب کنید و شعاع را با لغزنده تنظیم کنید.
برای کنترل جداگانه‌ی هر گوشه، به حالت «پیشرفته» بروید. هر گوشه دو لغزنده دارد: اولی شعاع افقی و دومی شعاع عمودی.
یا از شکل‌های آماده (دایره، اسکویرکل، برگ یا بلاب تصادفی) شروع کنید و آن‌ها را تغییر دهید.
نوع خروجی را انتخاب کنید (CSS یا Tailwind) و کد را در پروژه‌ی خود قرار دهید.

سینتکس border-radius؛ یک تا هشت مقدار

تعداد مقدار	نمونه	معنی
یک مقدار	`12px`	هر چهار گوشه یکسان
دو مقدار	`12px 4px`	بالا-چپ و پایین-راست / بالا-راست و پایین-چپ
سه مقدار	`12px 4px 8px`	بالا-چپ / بالا-راست و پایین-چپ / پایین-راست
چهار مقدار	`12px 4px 8px 0`	بالا-چپ، بالا-راست، پایین-راست، پایین-چپ (در جهت عقربه‌های ساعت)
با اسلش	`50% 20% / 30% 60%`	مقادیر قبل از اسلش شعاع افقی و بعد از اسلش شعاع عمودی

نمونه‌کدهای پرکاربرد

/* کارت با گوشه‌های گرد */
.card { border-radius: 12px; }

/* آواتار دایره‌ای (عرض و ارتفاع برابر) */
.avatar { width: 80px; height: 80px; border-radius: 50%; }

/* دکمه‌ی قرصی شکل (pill) */
.pill { border-radius: 9999px; }

/* شکل بلاب ارگانیک */
.blob { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }

دایره یا قرص؟ مقدار 50% روی عنصر مربعی دایره می‌سازد، اما روی عنصر مستطیلی یک بیضی ایجاد می‌کند. برای دکمه‌هایی با دو سر کاملاً گرد (قرصی)، از یک مقدار پیکسلی بزرگ مثل 9999px استفاده کنید.

border-radius در سایت‌های فارسی و راست‌به‌چپ (RTL)

ویژگی border-radius و ویژگی‌هایی مثل border-top-left-radius بر اساس جهت فیزیکی صفحه کار می‌کنند؛ یعنی «بالا-چپ» در صفحه‌ی راست‌به‌چپ هم همان بالا-چپ باقی می‌ماند و برعکس نمی‌شود. اگر کارتی دارید که فقط گوشه‌ی سمت شروع متن آن باید گرد باشد و سایت شما دوزبانه است، از ویژگی‌های منطقی استفاده کنید که با جهت متن جابه‌جا می‌شوند:

/* گوشه‌ی بالای سمت شروع متن:
   در LTR بالا-چپ و در RTL بالا-راست */
.card {
  border-start-start-radius: 16px;
  border-end-start-radius: 16px;
}

border-start-start-radius: گوشه‌ی بالا در سمت شروع متن
border-start-end-radius: گوشه‌ی بالا در سمت پایان متن
border-end-start-radius: گوشه‌ی پایین در سمت شروع متن
border-end-end-radius: گوشه‌ی پایین در سمت پایان متن

این ویژگی‌ها در همه‌ی مرورگرهای مدرن پشتیبانی می‌شوند و Tailwind هم از نسخه‌ی ۳٫۳ کلاس‌های منطقی مثل rounded-s-* و rounded-e-* را ارائه می‌کند.

این ابزار برای چه کسانی مناسب است؟

توسعه‌دهندگان فرانت‌اند: برای ساخت سریع کد border-radius بدون آزمون‌وخطا.
طراحان رابط کاربری: برای تبدیل گوشه‌های طراحی‌شده در فیگما به CSS.
کاربران Tailwind: برای ساخت کلاس‌های مقدار دلخواه برای شکل‌های غیراستاندارد.
یادگیرندگان CSS: برای دیدن اثر هر مقدار به‌صورت زنده.

برای انتخاب رنگ‌های مناسب کارت‌ها و دکمه‌ها از استخراج کد رنگ از عکس و تست کنتراست رنگ استفاده کنید. ابزارهای برنامه‌نویسی دیگر تولتولیا مثل JSON Formatter و Validator و ‎.gitignore ساز را هم امتحان کنید.

سؤالات متداول

چطور با CSS یک دایره‌ی کامل بسازم؟

عرض و ارتفاع عنصر را برابر قرار دهید و border-radius: 50% را اعمال کنید، یا از شکل آماده‌ی «دایره» استفاده کنید. اگر عرض و ارتفاع برابر نباشند، نتیجه بیضی خواهد بود.

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

اسکویرکل شکلی بین مربع و دایره است؛ گوشه‌هایی نرم‌تر از یک مستطیل گرد معمولی دارد اما کاملاً دایره نیست. این شکل در آیکون اپلیکیشن‌ها و کارت‌های مدرن محبوب است.

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

بله. border-radius با یک transition ساده قابل متحرک‌سازی است؛ مثلاً transition: border-radius 0.3s ease. این روش برای افکت‌های هاور که شکل کارت یا دکمه را تغییر می‌دهند بسیار رایج است.

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

چون border-radius بر اساس جهت فیزیکی کار می‌کند. برای اینکه گوشه‌ها با جهت متن جابه‌جا شوند، از ویژگی‌های منطقی مثل border-start-start-radius استفاده کنید.

چرا گوشه‌ها در عنصر کوچک کمتر گرد به نظر می‌رسند؟

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

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

بله. این ویژگی، از جمله سینتکس بیضوی با اسلش، سال‌هاست در همه‌ی مرورگرهای مدرن به یک شکل پشتیبانی می‌شود و دیگر نیازی به پیشوندهایی مثل -webkit- ندارد.