تولید کننده شعاع حاشیه
ویژگی‌های شعاع حاشیه CSS را به صورت بصری ایجاد و پیش‌نمایش کنید.
CSS تولید شده
گردی هر گوشه را تنظیم کنید
پیش‌نمایش
پیش‌نمایش افکت شعاع حاشیه تولید شده
پیش‌نمایش
CSS تولید شده
border-radius: 20px;مثال‌ها
برای اعمال سبک‌های شعاع حاشیه از پیش تعریف شده، روی آنها کلیک کنید
ویژگی‌های شعاع حاشیه
ترتیب ویژگی
ویژگی شعاع حاشیه به ترتیب ساعتگرد اعمال می‌شود: بالا-چپ → بالا-راست → پایین-راست → پایین-چپ
ویژگی‌های کوتاه‌نویسی
- •
border-radius: 10px;- برای هر چهار گوشه اعمال می‌شود - •
border-radius: 10px 20px;- اولی برای بالا-چپ و پایین-راست، دومی برای بالا-راست و پایین-چپ اعمال می‌شود - •
border-radius: 10px 20px 30px;- اولی برای بالا-چپ، دومی برای بالا-راست و پایین-چپ، سومی برای پایین-راست اعمال می‌شود - •
border-radius: 10px 20px 30px 40px;- به ترتیب برای بالا-چپ، بالا-راست، پایین-راست و پایین-چپ اعمال می‌شود
نکات استفاده
- • برای ایجاد یک دایره کامل از 50% استفاده کنید
- • 4-8px معمولاً برای دکمه‌ها مناسب است
- • 8-16px برای کارت‌ها و پنل‌ها رایج است
- • شعاع نامتقارن می‌تواند جلوه‌های طراحی منحصر به فردی ایجاد کند