border-radius گوشه‌های جعبه رو گرد می‌کنه. برای کارکردن این ویژگی لازم نیست حتماً border داشته باشیم؛ پس‌زمینه هم شکل گوشه‌های گرد رو دنبال می‌کنه. یک مقدار ساده مثل ۱۲ پیکسل روی هر چهار گوشه اعمال می‌شه. مقدارهای خیلی بزرگ می‌تونن دکمه یا برچسب رو شبیه کپسول کنن، ولی لازم نیست هر عنصر صفحه بیشترین گردی ممکن رو داشته باشه.
توی مثال، نشان کوتاه با گوشه بیست پیکسلی ظاهر نرم‌تری می‌گیره. نمونه اصلی یک کارت معمولی داره تا تفاوت گردی کم و زیاد روشن بشه. خطای رایج استفاده از border-width برای گردکردنه؛ ضخامت خط و شعاع گوشه دو تصمیم مستقل هستن. همین‌طور border-radius اندازه عرض یا فضای داخلی رو عوض نمی‌کنه. برای اجزایی که از قبل نقش متفاوت دارن، مقدار گردی منسجم انتخاب کن تا ظاهر صفحه اتفاقی به نظر نرسه. توی تمرین‌های بعد می‌تونیم همین مقدارها رو در متغیرهای مشترک نگه داریم و در چند جزء دوباره استفاده کنیم.
✍️ مثال حل‌شده:
<span class="pill">جدید</span>
<style>.pill { display:inline-block; padding:6px 14px; background:#dbeafe; border-radius:20px; }</style>
حالا نوبت توئه: کارت .rounded با زمینه سفید و padding شانزده پیکسل، border-radius:12px دارد. اثر گردشدن چهار گوشه را ببین و تفاوتش با ضخامت border را توضیح بده. این گام آموزشی است؛ ساختار و متن نمونه ثابت‌اند و افزودن خط دور برای دیدن گردی لازم نیست.
فعالیت شما
کارت .rounded با زمینه سفید و padding شانزده پیکسل، border-radius:12px دارد. اثر گردشدن چهار گوشه را ببین و تفاوتش با ضخامت border را توضیح بده. این گام آموزشی است؛ ساختار و متن نمونه ثابت‌اند و افزودن خط دور برای دیدن گردی لازم نیست.