پرش به محتوای اصلی
LibraTool logoLibraTool

تولید border-radius CSS رایگان

گوشه‌های گرد را به صورت بصری با کنترل مستقل روی هر گوشه طراحی کنید. از نحو X/Y بیضوی برای اشکال ارگانیک blob پشتیبانی می‌کند.

پس از بارگذاری آفلاین کار می‌کند
border-radius: 20px 20px 20px 20px;
واحد

کاربردهای رایج

  • اشکال Blob آلیاز نحو بیضوی X/Y برای ایجاد اشکال blob منحصر به فرد برای بخش های قهرمان و تصویر استفاده کنید.
  • گوشه های کارت و ظرفگوشه های گرد استاندارد برای کارت ها، ظروف و پانل ها در طراحی UI مدرن.
  • اشکال آواتار و عکس پروفایلسبک گوشه صحیح برای عکس های پروفایل ایجاد کنید: دایره ای، squircle یا مربع گرد شده.
  • قرص ها، برچسب ها و نشان هادکمه های قرص، برچسب ها و نشان های کاملا گرد شده را با پیش تنظیم 9999 بسازید.
  • طراحی گوشه نامتقارنشعاع را در سراسر گوشه ها ترکیب کنید تا اشکال کارت و دکمه متمایز و قابل تشخیص برند ایجاد کنید.

نحوه کار

سازنده border-radius کاملاً در مرورگر اجرا می‌شود — سرور، کتابخانه، یا آپلودی نیست. رشته مقدار CSS border-radius را مستقیماً در جاوااسکریپت با استفاده از حالت React و useMemo می‌سازد، سپس آن را به‌عنوان استایل درون‌خطی روی یک عنصر div زنده اعمال می‌کند تا موتور CSS خود مرورگر شکل را در زمان واقعی رندر کند.

  1. 1
    لغزنده‌ها حالت را می‌نویسند
    هر ورودی محدوده به یکی از هشت متغیر حالت عددی می‌نویسد — چهار شعاع گوشه افقی و چهار شعاع عمودی برای حالت بیضوی. حالت یکپارچه هر هشت را از طریق یک کمک‌کننده setAll در یک لغزنده واحد جمع می‌کند که همه مقادیر را یک‌جا همگام می‌کند.
  2. 2
    useMemo مقدار CSS را می‌سازد
    یک هوک useMemo رشته border-radius را هر وقت هر مقدار گوشه، واحد (px یا %)، یا تغییر بیضوی تغییر می‌کند دوباره محاسبه می‌کند. در حالت استاندارد، مخفف چهار-مقداری تولید می‌کند؛ با بیضوی روشن، جداکننده اسلش را برای سینتکس کامل هشت-مقداری اضافه می‌کند — مثلاً 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    موتور CSS مرورگر پیش‌نمایش را رندر می‌کند
    رشته محاسبه‌شده به‌عنوان استایل درون‌خطی borderRadius روی یک عنصر div ساده تنظیم می‌شود. موتور چیدمان مرورگر تمام رندر را انجام می‌دهد — بوم، SVG یا کد ترسیم شخص‌ثالثی در کار نیست.
  4. 4
    Clipboard API خروجی را کپی می‌کند
    کلیک روی کپی navigator.clipboard.writeText را با یا اعلان CSS (border-radius: ...;) یا کلاس مقدار-دلخواه معادل Tailwind (rounded-[...]) بسته به تغییر فرمت انتخابی فراخوانی می‌کند.

ابزارهای مرتبط

🎨

تولید سایه CSS

سازنده بصری برای box-shadow در CSS با پیش‌نمایش زنده، لایه‌بندی چندگانه، انتخابگر رنگ، تبدیل inset و کپی با یک کلیک. شامل پیش‌تنظیم‌های Material، neumorphism و درخشش.

امتحان کنید
🟦

تولیدکننده CSS Grid

یک CSS grid را بصری طراحی کنید — مسیرها، واحدها و شکاف‌ها — و CSS و HTML تولیدشده را کپی کنید.

امتحان کنید
↔️

تولیدکننده CSS Flexbox

با جهت flex، wrap، justify و align روی آیتم‌های مستقیم آزمایش کنید — و CSS را کپی کنید.

امتحان کنید

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