ویژگی border-top-right-radius یکی از ویژگی‌های جذاب CSS هست که می‌تونه برای زیباسازی ظاهر عناصر وب کمک کنه. این ویژگی مخصوصاً زمانی مفید می‌شه که بخواهید گوشه‌های یک عنصر رو به صورت منحنی در بیارید. راستش این ویژگی بیشتر از اینکه کاربردی باشه، جنبه ظاهری داره و برای بیشتر کردن زیبایی عناصر وب به کار میره.
بیاین فرض کنیم یک کارت دارید که می‌خواهید گوشه راست بالاش رو گرد کنید. خب قطعا این ویژگی به شما کمک می‌کنه. فقط کافیه مقدار دلخواهتون رو بهش بدید و معجزه رو ببینید!
دوستان! خوبی این ویژگی اینه که می‌تونه برای هماهنگی با طراحی کلی صفحه به کار بره. مثلاً اگر المان‌های دیگه‌ای هم روی صفحه باشه، می‌تونید اونها رو با هم مچ کنید و به یک طراحی هماهنگ برسید.
نکته جالب اینه که با ترکیب این ویژگی با ویژگی‌های دیگه مثل border-radius کلی زیبایی به صفحه‌هاتون بخشید. این ویژگی‌ها کاملاً با همدیگه سازگارند و به راحتی می‌شه استفاده کرد.
نمونه کد استفاده از border-top-right-radius
.example {\r\n width: 200px;\r\n height: 150px;\r\n background-color: #f0f0f0;\r\n border: 2px solid #ddd;\r\n border-top-right-radius: 20px;\r\n}\r\nتوضیح خط به خط کد
.example مشخص‌کننده یک کلاس CSS هست که به المان‌ها اعمال می‌کنیم.
width: 200px; عرض ۲۰۰ پیکسل برای المان تنظیم می‌کنه.
height: 150px; ارتفاع ۱۵۰ پیکسل برای المان تعیین می‌کنه.
background-color: #f0f0f0; رنگ پس‌زمینه رو به خاکستری روشن تغییر می‌ده.
border: 2px solid #ddd; یک حاشیه دو پیکسلی به رنگ خاکستری کمرنگ اطراف المان اضافه می‌کنه.
border-top-right-radius: 20px; گوشه راست بالای المان رو با شعاع ۲۰ پیکسل گرد می‌کنه.