سازنده Border Radius CSS
شعاع گوشه CSS را با پیشنمایش زنده بسازید و کد را کپی کنید.
همین حالا سازنده Border Radius CSS را امتحان کنید — رایگان و بدون ثبت‌نام
سازنده Border Radius CSS
چرا از سازنده Border Radius CSS استفاده کنیم؟
- رایگان و بدون نصب نرم‌افزار
- بدون ثبت‌نام اجباری
- رابط فارسی و ساده
- مناسب کارهای روزمره فایل و متن
چگونه استفاده کنیم؟
-
1
فایل را انتخاب کنید
فایل یا داده مورد نظر را در «سازنده Border Radius CSS» بارگذاری یا وارد کنید.
-
2
پردازش را شروع کنید
تنظیمات را در صورت نیاز بررسی کنید و پردازش را اجرا کنید.
-
3
نتیجه را دانلود کنید
خروجی آماده را دانلود کنید یا کپی کنید.
سوالات متداول
سازنده Border Radius CSS دقیقاً چه می‌کند؟
چطور از سازنده Border Radius CSS استفاده کنم؟
سازنده Border Radius CSS چه محدودیت یا فرمتی دارد؟
آیا سازنده Border Radius CSS فایل را روی سرور نگه می‌دارد؟
درباره این ابزار
گوشه‌های تیز مستطیل، نماد وب دهه نود است؛ امروز تقریباً هر کارت، دکمه و تصویر در طراحی مدرن با کمی گردی گوشه — یا حتی شکل کاملاً دایره‌ای — ظاهر میشود. سازنده Border Radius CSS تولیاک همین گردی گوشه‌ها را با پیشنمایش زنده و بدون محاسبه دستی درصد یا پیکسل برای شما تولید می‌کند؛ از یک دکمه با گوشه‌های کمی گرد تا یک آواتار کاملاً دایره‌ای.
خصوصیت CSS به‌نام border-radius در ظاهر ساده‌اش پیچیدگی بیشتری از آن‌چه انتظار می‌رود دارد: می‌توانید یک مقدار برای همه گوشه‌ها بدهید یا چهار مقدار جدا برای گوشه‌های بالا-چپ، بالا-راست، پایین-راست و پایین-چپ تعریف کنید، و حتی هر گوشه می‌تواند دو مقدار افقی و عمودی جدا داشته باشد (برای شکل‌های بیضی‌مانند). این ابزار این پیچیدگی را با کنترل‌های بصری ساده می‌کند و همزمان نتیجه را روی یک باکس نمونه نمایش می‌دهد.
طراحان وب برای دکمه‌ها و کارت‌ها، توسعه‌دهندگان فرانت‌اند برای کامپوننت‌های UI و حتی افراد غیرفنی که فقط می‌خواهند یک قالب آماده را سفارشی‌سازی کنند، از این ابزار استفاده می‌کنند. همه چیز در مرورگر انجام میشود؛ سریع، دقیق و کاملاً رایگان.
آموزش استفاده از ابزار
برای تنظیم شعاع گوشه‌های دلخواه:
- حالت «همه گوشه‌ها یکسان» یا «هر گوشه جداگانه» را انتخاب کنید.
- در حالت یکسان، یک مقدار (بر حسب پیکسل یا درصد) برای گردی همه چهار گوشه تنظیم کنید.
- در حالت جداگانه، مقدار هر یک از گوشه‌های بالا-چپ، بالا-راست، پایین-راست و پایین-چپ را مستقل تعیین کنید.
- از پیش‌تنظیم‌های آماده مثل rounded (گرد ملایم)، pill (کاملاً بیضی برای دکمه) یا circle (دایره کامل) برای دستیابی سریع به شکل‌های رایج استفاده کنید.
- پیشنمایش زنده را بررسی کنید و کد CSS نهایی (خصوصیت border-radius) را کپی کنید.
مزایا و کاربردها
- کنترل دقیق و مجزا روی هر گوشه بدون نیاز به حفظ سینتکس CSS
- پیش‌تنظیم‌های آماده برای شکل‌های رایج مثل دکمه بیضی و آواتار دایره‌ای
- پیشنمایش زنده که نتیجه نهایی را دقیقاً همان‌طور که در سایت دیده میشود نشان می‌دهد
- کد خروجی سازگار با تمام مرورگرهای مدرن
- رایگان، بدون ثبت‌نام و بدون محدودیت استفاده
مثال واقعی
فرض کنید می‌خواهید عکس پروفایل کاربران در سایت خود را به شکل دایره کامل نمایش دهید. تصویر شما مربع ۲۰۰x۲۰۰ پیکسل است؛ در ابزار، پیشتنظیم circle را انتخاب می‌کنید که به‌صورت خودکار مقدار border-radius را ۵۰٪ تنظیم می‌کند — کدی شبیه به border-radius: 50%;. این مقدار را در کلاس CSS تصویر پروفایل قرار می‌دهید و از آن پس هر عکس مربعی که در آن کلاس قرار بگیرد، به‌صورت خودکار به دایره کامل تبدیل میشود، بدون نیاز به برش دستی تصویر در فتوشاپ.
نکات و خطاهای رایج
- برای دایره کامل، مقدار border-radius باید ۵۰٪ باشد و عرض و ارتفاع المان هم برابر (مربع) تنظیم شود؛ در غیر این صورت شکل بیضی خواهد شد.
- مقادیر پیکسلی (px) برای ظاهر ثابت در همه اندازه صفحه و مقادیر درصدی (%) برای تناسب نسبی با اندازه المان مناسب‌تر هستند.
- گردی بیش‌ازحد روی المان‌های کوچک (مثل آیکون ۱۶ پیکسلی) ممکن است شکل را غیرقابل‌تشخیص کند؛ برای المان‌های کوچک مقادیر کمتر انتخاب کنید.
- برای طراحی یکدست، از یک یا دو مقدار ثابت گردی (مثلاً ۸ پیکسل برای کارت‌ها و ۹۹۹ پیکسل برای دکمه‌های بیضی) در کل پروژه استفاده کنید.
مقایسه با ابزارهای مشابه
برای تکمیل ظاهر المانی که گوشه‌های گرد گرفته، سایه آن را با ساخت سایه باکس CSS و پس‌زمینه‌اش را با ساخت گرادیان آنلاین تنظیم کنید. رنگ‌های هماهنگ برای این المان‌ها را می‌توانید از ساخت پالت رنگ آنلاین یا انتخابگر رنگ آنلاین انتخاب کنید.