Border Radius چیست؟ (مبانی علمی)
ویژگی border-radius در CSS به طراحان اجازه میدهد تا گوشههای تیز جعبهها (Box Model) را گرد کنند. قبل از معرفی CSS3، طراحان مجبور بودند از تصاویر پسزمینه پیچیده برای ایجاد گوشههای گرد استفاده کنند، اما اکنون این کار با یک خط کد انجام میشود. این ویژگی نقش مهمی در "دوستانهتر" کردن رابط کاربری دارد؛ زیرا چشمان انسان به طور طبیعی اشکال منحنی را راحتتر از گوشههای تیز و خشن پردازش میکند. در طراحیهای مدرن، دکمهها و کارتها تقریبا همیشه دارای مقداری گردی (Radius) هستند.
سینتکس و نحوه نوشتن
شما میتوانید این ویژگی را به ۴ روش مختلف مقداردهی کنید:
مثالهای کاربردی
عکس پروفایل (Avatar)
برای دایره کردن عکسها، کافی است border-radius: 50% را روی یک المان مربعی اعمال کنید.
دکمههای نرم
اکثر دکمهها در طراحی فلت (Flat Design) دارای گردی بین 4px تا 8px هستند.
دکمههای کپسولی
برای دکمههای کپسولی (Pill)، از یک مقدار بزرگ پیکسل مثل 9999px استفاده میشود تا لبهها کاملا گرد شوند.
اشتباهات رایج (Khataha-ye Rayej)
- ×
استفاده از درصد (%) برای اشکال مستطیلی وقتی هدف دایره نیست؛ این کار باعث ایجاد بیضیهای ناخواسته میشود.
- ×
فراموش کردن
overflow: hidden. اگر محتوای داخل المان (مثلا عکس) بزرگتر از کادر باشد، گوشههای گرد بریده نخواهند شد. - ×
ناهمخوانی Border Radius تودرتو؛ اگر کادر بیرونی 20px گردی دارد، کادر داخلی باید کمی کمتر (مثلا 16px) باشد تا فاصله حاشیه (Padding) یکنواخت به نظر برسد.
سوالات متداول
آیا Border Radius در همه مرورگرها کار میکند؟
چگونه فقط دو گوشه بالا را گرد کنیم؟
border-radius: 10px 10px 0 0; که برای تبها (Tabs) کاربرد دارد.