ساخت گوشه گرد border-radius
هر چهار گوشه را با هم یا هر کدام را جداگانه گرد کنید و خط border-radius را کپی کنید.
CSS
ساخت گوشههای گرد با CSS
گوشههای گرد کارت‌ها، دکمه‌ها، آواتارها و تصویرها را نرم‌تر می‌کنند. این صفحه مولد CSS را روی زبانه گردی گوشهها باز می‌کند؛ آنجا می‌توانید همه گوشهها را با هم گرد کنید یا به هر کدام شکل جداگانه بدهید.
نمونه‌ها
| CSS | شکل |
|---|---|
border-radius: 8px; | کارت یا دکمه با گردی ملایم |
border-radius: 50%; | دایره روی مربع، مثل آواتار |
border-radius: 999px; | دکمه یا برچسب کپسولی |
border-radius: 24px 24px 0px 0px; | فقط گوشههای بالا گرد، مثل پنل کشویی پایین صفحه (bottom sheet) |
پیکسل یا درصد
مقدارهای پیکسلی در هر اندازه‌ای از عنصر همان انحنا را نگه می‌دارند و برای دکمه‌ها و کارت‌ها مناسب‌اند. مقدارهای درصدی با عنصر بزرگ میشوند و هر گوشه جداگانه نسبت به پهنا و ارتفاع سنجیده می‌شود، پس روی مستطیل انحنا بیضوی می‌شود.
ابزارهای مرتبط
برای افزودن سایه به عنصر گردشده، ساخت سایه box-shadow را ببینید. برای پر کردن با گرادیانت، ساخت گرادیانت CSS را ببینید.