فرض کنید می‌خواهید گوشه‌های یک دکمه، کارت محصول یا تصویر از حالت تیز به حالت گرد تبدیل شوند. با
ویژگی border-radius در CSS می‌توانید این کار را بدون تصویر کمکی یا JavaScript انجام دهید.
در این مقاله، هر مفهوم را با توضیح کوتاه، پیش‌نمایش واقعی و یک فایل HTML کامل یاد می‌گیرید. ابتدا گوشه‌های ساده، سپس مقداردهی به هر گوشه و در پایان شکل‌های بیضوی و یک تمرین کاربردی را می‌بینیم.
۱. Border Radius چیست و چه کاربردی دارد؟
در HTML، تگ‌هایی مثل div برای ساخت بخش‌های صفحه و p برای نوشتن پاراگراف استفاده
می‌شوند. مرورگر این عناصر را در قالب جعبه‌هایی روی صفحه نمایش می‌دهد. با CSS رنگ، اندازه و گوشه‌های این جعبه‌ها
را تغییر می‌دهیم. border-radius میزان انحنای گوشه‌های بیرونی جعبه را مشخص می‌کند.
برای نمونه، border-radius: 25px به هر چهار گوشه شعاع ۲۵ پیکسل می‌دهد. px مخفف پیکسل
است و در اینجا اندازه انحنای گوشه را تعیین می‌کند.
در CSS، ویژگی border-radius حالت خلاصه‌نویسی (Shorthand) چهار ویژگیِ مربوط به تک‌تک گوشه‌هاست.
پایین‌تر هر چهار مورد را جداگانه معرفی می‌کنیم.
۲. سه مثال ابتدایی: رنگ، حاشیه و تصویر پس‌زمینه
سه کاربرد متفاوت رو بررسی می‌کنیم: دکمه با زمینه رنگی، پیام دارای خط حاشیه و کاور با پس‌زمینه تصویری. هر مثال کد کامل و خروجی واقعی خودش رو داره.
ساخت دکمه با چهار گوشه گرد
یک نمونه واقعی از دکمه شروع یادگیری: هر چهار گوشه با یک مقدار مشترک گرد شده‌اند.
چرا این خروجی ایجاد شده؟ ویژگی border-radius:25px چهار
گوشه دکمه را گرد می‌کند. رنگ آبی حاصل background و فاصله متن از لبه‌ها حاصل padding
است.
کادر اطلاع‌رسانی با خط حاشیه گرد
این بار خود خط حاشیه دور یک پیام آموزشی گرد می‌شود؛ تفاوت آن با دکمه قبلی را ببینید.
چرا این خروجی ایجاد شده؟ با border:2px solid یک خط حاشیه
آبی ایجاد شده و border-radius گوشه‌های همان حاشیه را خم می‌کند؛ نیازی به رنگ‌کردن تمام سطح نیست.
کاور دوره با پس‌زمینه تصویری
تصویر پس‌زمینه این کاور با گرادیان CSS ساخته شده و بدون فایل جانبی داخل گوشه‌های گرد می‌ماند.
چرا این خروجی ایجاد شده؟ دو گرادیان در background-image
ظاهر کاور را می‌سازند. گوشه‌های تصویر همراه خود کاور گرد می‌شوند؛ این مثال به فایل تصویر خارجی نیاز ندارد.
۳. مقداردهی جداگانه به گوشه‌های عنصر
اگر یک مقدار بدهید، چهار گوشه یکسان گرد می‌شوند. برای گوشه‌های متفاوت می‌توانید دو، سه یا چهار مقدار بنویسید. در حالت چهارتایی، ترتیب از بالا چپ در جهت ساعت‌گرد است؛ این ترتیب حتی در صفحه راست‌به‌چپ هم تغییر نمی‌کند.
چهار مقدار برای چهار گوشه جداست؛ با سه مقدار، گوشه‌های بالا راست و پایین چپ برابر می‌شوند؛ با دو مقدار، هر دو گوشه روبه‌رو مقدار برابر می‌گیرند.
کارت پیشنهاد با چهار شعاع متفاوت
به چهار گوشه کارت پیشنهاد توجه کنید: ۱۵، ۵۰، ۳۰ و ۵ پیکسل به‌ترتیب اعمال شده‌اند.
چرا این خروجی ایجاد شده؟ به گوشه‌های کارت پیشنهاد دقت کنید. در مقدار چهارتایی، ترتیب از بالا چپ شروع می‌شود و ساعت‌گرد است: بالا چپ، بالا راست، پایین راست، پایین چپ. این ترتیب به راست‌چین بودن صفحه وابسته نیست.
حباب پیام با سه مقدار
حباب گفتگو را بررسی کنید؛ با سه مقدار، دو گوشه در حالت قرینه انحنای برابر می‌گیرند.
چرا این خروجی ایجاد شده؟ وقتی فقط سه مقدار داریم، مقدار دوم برای دو گوشه بالا راست و پایین چپ مشترک است. مقدار اول بالا چپ و مقدار سوم پایین راست را کنترل می‌کنند.
کوپن تخفیف با دو مقدار
در این کوپن، جفت گوشه‌های روبه‌رو یک شکل دارند؛ فقط دو مقدار CSS کافی است.
چرا این خروجی ایجاد شده؟ در حالت دو مقدار، مقدار اول گوشه‌های بالا چپ و پایین راست و مقدار دوم دو گوشه دیگر را تنظیم می‌کند.
۴. گوشه‌های بیضوی و مقدار درصدی در Border Radius
تا اینجا برای هر گوشه یک شعاع مشخص کردیم. گاهی می‌خواهیم انحنای گوشه در راستای افقی و عمودی متفاوت باشد؛ برای
این کار دو عدد را با / جدا می‌کنیم: شعاع افقی / شعاع عمودی.
لیبل افقی با گوشه بیضوی
برچسب افقی برای مقایسه شعاع افقی ۵۰ و عمودی ۱۵ پیکسل طراحی شده است.
چرا این خروجی ایجاد شده؟ علامت / شعاع افقی را از شعاع
عمودی جدا می‌کند؛ بنابراین مقدار 50px / 15px گوشه‌ها را پهن‌تر از ارتفاع انحنایشان نمایش می‌دهد.
پنل عمودی با انحنای بیضوی
برخلاف لیبل قبلی، این پنل انحنای عمودی بلندتر دارد؛ اثر جابه‌جایی دو مقدار را ببینید.
چرا این خروجی ایجاد شده؟ مقدار 15px / 50px به گوشه‌ها
انحنای عمودی بلندتری نسبت به انحنای افقی می‌دهد.
مقدار درصدی: مقدارهای درصدی با ابعاد خود عنصر مرتبط‌اند. بنابراین
border-radius: 50% روی یک مستطیل لزوماً دایره نمی‌سازد.
بیضی با Border Radius پنجاه درصد
یک برچسب پهن با عرض و ارتفاع متفاوت، در مقدار ۵۰٪ بیضی می‌شود نه دایره.
چرا این خروجی ایجاد شده؟ درصدِ افقی نسبت به عرض جعبه و درصدِ عمودی نسبت
به ارتفاع آن محاسبه می‌شود. چون جعبه مستطیلی است، 50% شکل بیضی می‌سازد؛ برای دایره به عرض و
ارتفاع برابر نیاز داریم.
دایره واقعی با عرض و ارتفاع برابر
برای ساخت دایره، عرض و ارتفاع جعبه را برابر می‌گذاریم و سپس مقدار ۵۰٪ را اعمال می‌کنیم.
چرا این خروجی ایجاد شده؟ width و height هر دو
۱۷۰ پیکسل‌اند، بنابراین مقدار border-radius: 50% یک دایره کامل می‌سازد.
border-radius معتبر نیست. انحنای گوشه‌ها روی ظاهر پس‌زمینه و حاشیه اثر
می‌گذارد، اما برای جلوگیری از بیرون‌زدگی محتوای داخلی، ممکن است به overflow: hidden هم نیاز داشته
باشید.۵. ویژگی‌های اختصاصی برای گرد کردن هر گوشه
border-radius خلاصه چهار ویژگی زیر است. در جدول، محل هر گوشه به‌درستی مشخص شده است.
| ویژگی | کاربرد |
|---|---|
border-radius |
گردسازی همه گوشه‌ها با یک تا چهار مقدار |
border-top-left-radius |
گوشه بالا چپ |
border-top-right-radius |
گوشه بالا راست |
border-bottom-right-radius |
گوشه پایین راست |
border-bottom-left-radius |
گوشه پایین چپ |
تنظیم هر گوشه با ویژگی جداگانه
چهار ویژگی اختصاصی CSS همان کاری را انجام می‌دهند که شکل چهارتایی border-radius انجام می‌دهد.
چرا این خروجی ایجاد شده؟ هر خط فقط گوشه مشخصی را تغییر می‌دهد؛ برای
نمونه border-bottom-left-radius یعنی گوشه پایین چپ، نه بالا چپ.
۶. آزمایشگاه تعاملی Border Radius
در مقاله Padding چهار طرف عنصر را تنظیم می‌کنیم؛ اما در Border Radius چهار گوشه مستقل داریم. هر اسلایدر زیر فقط یکی از چهار گوشه را تغییر می‌دهد. ابتدا یکی را روی صفر بگذارید، سپس آن را تا ۸۰ بالا ببرید و نتیجه را با سه گوشه دیگر مقایسه کنید.
پیش‌نمایش زنده — هر اسلایدر فقط یک گوشه رو تغییر می‌ده:
۷. تمرین عملی: ساخت کارت با گوشه‌های گرد
یک کاربرد واقعی border-radius طراحی کارت دوره یا محصول است. در نمونه زیر خود کارت، بخش تصویری و
دکمه هرکدام انحنای مناسب دارند.
تمرین کاربردی: کارت آموزشی با گوشه‌های گرد
در این تمرین یک کارت دارای تصویر نمادین، متن و دکمه را با border-radius طراحی می‌کنیم.
چرا این خروجی ایجاد شده؟ border-radius: 22px گوشه‌های کارت
را گرد می‌کند و overflow: hidden باعث می‌شود بخش آبی بالای کارت هم از گوشه گرد بیرون نزند. دکمه
نیز شعاع جداگانه‌ای دارد.
22px به 0 تغییر
دهید و نتیجه را ببینید. سپس overflow: hidden را موقتاً حذف کنید؛ تفاوت گوشه بالای تصویر را بررسی
کنید. در پایان شعاع کارت را به 32px تغییر دهید.۸. جمع‌بندی؛ چه زمانی از Border Radius استفاده کنیم؟
برای گرد کردن یکسان چهار گوشه، یک مقدار مثل border-radius: 16px کافی است. برای گوشه‌های متفاوت از
دو تا چهار مقدار استفاده کنید. با علامت / شعاع افقی و عمودی را جدا کنید و برای ساخت دایره، ابتدا
ارتفاع و عرض را برابر بگذارید.