گوشه های گرد در CSS (Rounded Corners)
در CSS ویژگی «گوشه های گرد (Rounded Corners)» با خاصیت border-radius پیاده سازی می شود؛ بنابراین می توانید برای هر عنصر با پس زمینه، مرز یا تصویر پس زمینه، لبه های نرم و زیبا بسازید.
آشنایی با ویژگی border-radius
خاصیت border-radius شعاع گوشه ها را تعیین می کند و روی عناصری با background-color، border یا background-image اعمال می شود.
نمونه ساده گوشه های گرد
#box1 { border-radius: 25px; background-color: #73AD21; padding: 20px; width: 200px; height: 150px; }
#box2 { border-radius: 25px; border: 2px solid #73AD21; padding: 20px; width: 200px; height: 150px; }
#box3 { border-radius: 25px; background-image: url(paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; }نکته: border-radius میان بُری برای border-top-left-radius، border-top-right-radius، border-bottom-right-radius و border-bottom-left-radius است.
تعیین گوشه ها با 1 تا 4 مقدار
این ویژگی می تواند یک تا چهار مقدار بگیرد. ترتیب مقادیر به ترتیب: بالا-چپ، بالا-راست، پایین-راست، پایین-چپ است.
/**** چهار مقدار ****/
#v4 { border-radius: 15px 50px 30px 5px; background: #04AA6D; width: 200px; height: 150px; }
/**** سه مقدار ****/
#v3 { border-radius: 15px 50px 30px; background: #04AA6D; width: 200px; height: 150px; }
/**** دو مقدار ****/
#v2 { border-radius: 15px 50px; background: #04AA6D; width: 200px; height: 150px; }
/**** یک مقدار ****/
#v1 { border-radius: 15px; background: #04AA6D; width: 200px; height: 150px; }شکل های بیضوی و دایره ای
برای گوشه بیضوی، برای هر شعاع دو مقدار افقی/عمودی با اسلش / بدهید. همچنین مقدار 50% روی عناصر مربع دایره می سازد و روی مستطیل بیضی.
#ellip1 { border-radius: 70px / 30px; background: #04AA6D; width: 200px; height: 150px; }
#ellip2 { border-radius: 15px / 50px; background: #04AA6D; width: 200px; height: 150px; }
#oval { border-radius: 50%; background: #04AA6D; width: 200px; height: 150px; }
#circle { border-radius: 50%; background: #04AA6D; width: 200px; height: 200px; }نکات کاربردی گوشه های گرد
- برای سازگاری بصری، مقادیر را در طراحی سیستماتیک توکن گذاری کنید.
- در کارت ها و دکمه ها از مقادیر ثابت استفاده کنید تا هماهنگی حفظ شود.
هشدار: مقداردهی افراطی به border-radius ممکن است با محتوای داخلی هم پوشانی نامطلوب ایجاد کند.
منابع و ادامه مطالعه
برای مرور مفاهیم واکنش گرایی و استفاده بهتر در طرح ها، به چیدمان وب سایت و دسترس پذیری سر بزنید. همچنین درباره border-radius در MDN و background-clip در MDN بخوانید. برای دسترسی سریع، لینک گوشه های گرد را ذخیره کنید.