CSS — کادرها - گرد (Rounded Borders)

آخرین بروزرسانی: 1404/07/12

قبلی: کادرها - کوتاه نویسی (Shorthand Border Property)

حاشیه گرد در CSS (Rounded Borders)

ویژگی «حاشیه گرد (Rounded Border)» با استفاده از border-radius به عنصر گوشه های نرم می دهد. این ویژگی مستقیماً روی کادر اعمال می شود و بدون تغییر ساختار HTML، ظاهری مدرن تر ایجاد می کند.

ایجاد حاشیه گرد با `border-radius`

در کد زیر «حاشیه گرد» را روی یک پاراگراف اعمال می کنیم. در مثال های متن، مقدارهای 5px، 8px و 12px گوشه هایی با گردی بیشتر می سازند.

p { border: 2px solid red; border-radius: 5px; }

نکته: برای دیدن اثر border-radius باید کادری قابل مشاهده داشته باشید؛ مثلاً با تعیین کوتاه نویسی کادر یا تنظیم کادرها همراه با سبک کادر.

نمونه های بیشتر از حاشیه گرد

در متن منبع، نمونه هایی از «کادر عادی»، «کادر با گردی کم»، «گردتر» و «بسیار گرد» نمایش داده شده است. می توانید همین الگو را با مقدارهای متفاوت border-radius تکرار کنید.

همه ویژگی های مرتبط با کادر

فهرست منبع شامل تمام ویژگی های کادر است. برای ادامه یادگیری از راهنماهای داخلی استفاده کنید:

راهنمای MDN برای border-radius و مرجع W3C Corners جزئیات استاندارد را ارائه می کنند.