border-radius CSS را به‌صورت بصری با پیش‌نمایش زنده طراحی کنید و کد آماده تولید را کپی کنید.

پیش‌نمایش دستگیره‌های گوشه را بکشید
CSS
border-radius: ;

۱۰۰٪ خصوصی — همه چیز در مرورگر شما اجرا می‌شود. چیزی آپلود نمی‌شود.

همه گوشه‌ها
px
px
عنصر
پیش‌تنظیم‌ها

درباره تولیدکننده شعاع حاشیه CSS

تولیدکننده CSS Border Radius همه‌چیز از کارت‌های ملایم گرد گرفته تا اشکال آلی حباب‌مانند را می‌سازد. دستگیره‌های گوشه را مستقیماً روی پیش‌نمایش بکشید یا هر گوشه را به‌صورت عددی تنظیم کنید — از جمله نحو کامل هشت‌مقداری، که در آن هر گوشه شعاع افقی و عمودی جداگانه دارد. همین محور دوم است که تخم‌مرغ، برگ، قطره اشک و حباب را ممکن می‌کند.

یک کلید link-corners همه چهار گوشه را برای گردی یکنواخت کلاسیک هماهنگ نگه می‌دارد، درحالی‌که جدا کردن آن‌ها هر گوشه را برای اشکال نامتقارن آزاد می‌کند. دوازده پیش‌تنظیم — rounded، pill، circle، squircle، دو حباب، leaf، egg، arch، teardrop، petal و wave — نشان می‌دهند این ویژگی چه کارهایی می‌تواند بکند، و یک دکمه تصادفی‌سازی به‌طور نامحدود اشکال آلی تازه تولید می‌کند.

می‌توانید واحد را تغییر دهید، رنگ عنصر و بوم را برای همخوانی با طراحی خود عوض کنید، و مقدار خام border-radius یا یک قاعده کامل CSS را کپی کنید. این ابزار ۱۰۰٪ سمت کلاینت است — هیچ‌چیز آپلود نمی‌شود.

نحوه استفاده از تولیدکننده شعاع حاشیه CSS

  1. دستگیره‌های گوشه را روی پیش‌نمایش بکشید، یا «Link all corners» را خاموش کنید تا هر گوشه را جداگانه ویرایش کنید.
  2. شعاع افقی و عمودی هر گوشه را برای اشکال آلی و حباب‌مانند تنظیم کنید.
  3. واحد خود را انتخاب کنید و رنگ‌های عنصر و پس‌زمینه را برای پیش‌نمایش در بافت واقعی تنظیم کنید.
  4. پیش‌تنظیم‌ها — pill، squircle، blob، leaf، teardrop و بیشتر — را امتحان کنید، یا روی تصادفی‌سازی بزنید.
  5. مقدار border-radius یا CSS کامل را کپی کنید.

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

مقادیر قبل از اسلش شعاع افقی چهار گوشه هستند؛ مقادیر بعد از آن شعاع عمودی هستند. متفاوت کردن این دو محور در هر گوشه است که یک جعبه گرد ساده را به تخم‌مرغ، برگ یا حباب تبدیل می‌کند.

برای دایره، از یک عنصر مربعی با border-radius: 50% استفاده کنید. برای قرص (pill)، به هر مستطیلی شعاعی حداقل نصف ارتفاعش بدهید — پیش‌تنظیم‌های circle و pill هر دو را فوراً تنظیم می‌کنند.

بله — border-radius جعبه عنصر را کلیپ می‌کند، از جمله تصاویر پس‌زمینه، و overflow: hidden کلیپ را به محتوای فرزند نیز گسترش می‌دهد. اعمال شعاع حباب روی یک عنصر img راهی سریع برای ساخت ماسک عکس آلی است.

بله، border-radius با ترنزیشن‌های CSS به‌صورت روان درون‌یابی می‌شود وقتی هر دو حالت واحدهای سازگار داشته باشند. انیمیت کردن بین دو مقدار حباب هنگام hover یک جلوه محبوب دگرگونی آلی است — هر دو حالت را اینجا بسازید و بین آن‌ها ترنزیشن کنید.

بله، کاملاً رایگان و خصوصی: فقط در مرورگر شما اجرا می‌شود، بدون حساب کاربری و بدون ارسال هیچ داده‌ای به جایی.

اشتراک‌گذاری

جستجوهای پرطرفدار
تولیدکننده شعاع حاشیه css تولیدکننده border radius تولیدکننده border radius فانتزی تولیدکننده گوشه گرد css ابزار آنلاین border radius css تولیدکننده border radius بیضوی تولیدکننده شکل حباب css ابزار پیش‌نمایش border radius
به کمک نیاز دارید؟
با این ابزار مشکلی پیدا کردید؟ به تیم ما اطلاع دهید.
گزارش مشکل

این ابزار رایگان را به وب‌سایت خود اضافه کنید — کد زیر را کپی و جای‌گذاری کنید.